css3属性transform之rotate

SupAack

于 2020-02-20 18:15:15 发布

阅读量867

点赞数 1

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/SupAack/article/details/104415084

本文深入探讨CSS中transform属性的rotateX, rotateY 和 rotateZ 功能，讲解如何通过这些属性实现元素沿不同轴线的3D旋转效果，同时说明了旋转操作如何保持元素的原有位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rotateX & rotateY & rotateZ 旋转

transform:rotateX(60deg); /* 以X轴为中心线旋转 */
transform:rotateY(60deg); /* 以Y轴为中心线旋转 */
transform:rotateZ(60deg); /* 以Z轴为中心线旋转 */
transform: rotateX(20deg) rotateY(50deg) rotateZ(10deg);

在这里插入图片描述

`旋转不改变原有位置`

只写 rotate(0deg) 相当于 rotateX(0deg)
在这里插入图片描述