CSS3的3D效果样式transform属性中的rotate3d

时间:2024-02-16 10:39:41

1.介绍
在css3中新加了一些3d特效,如translate3d,scale3d,rotate3d,与css3中的2d特效最大的区别就是多了个z轴,因此才有了3d效果。因为scale3d(x,y,z)等价于scaleX(x),scaleY(y),scaleZ(z)分别对x,y, z坐标值进行缩放,比较容易理解,translate3d平移也是类似,比较简单,这里就不就介绍了,详细请参考http://www.w3school.com.cn/或菜鸟教程等网站。
本文主要详细介绍不大容易理解的rotate3d属性,
2.代码

Title

df

perspective是透视距,写在父元素,以获得更好的3d效果,transition是过渡时间,transform是样式转换。 通过总结:发现rotate3d(20,0,0,45deg),其实就是从原点指向(20,0,0)这个点构成一个方向轴,然后根据左手定则,四指指向方向为旋转方向,旋转45度。因此这样就很好解释了rotate3d(x,y,z,deg)属性,由原点指向(x,y,z)成方向轴,然后左手定则,确定旋转方向,进行相应的角度旋转,得到特效结果。 注释: css3里的3d坐标轴:z轴垂直电脑屏幕指向你,y轴在电脑屏幕垂直朝下,x轴在电脑屏幕水平向右 左手定则:类似物理当中的左手定则,大拇指指向旋转方向轴正方向,四指环绕紧握,四指指向为元素旋转方向 旋转原点:一般指向元素正中心,当然你可以设定旋转元素上设置样式transform-origin进行相应更改