CSS3基础初步认识CSS3转换效果之3D旋转方法

初步认识CSS3转换效果之3D旋转方法

2D转换指的是元素在平面内进行的变换,只涉及到平面坐标系,而3D转换涉及到三维空间坐标系,在平面坐标系上如果有一条垂直于该平面的坐标轴Z轴,则构成三维坐标系,对于面对屏幕的您来说,Z轴相当于是垂直屏幕的一条线,在平面上发生的2D旋转相当于是元素围绕着Z轴旋转的,而CSS里的3D变换还可以使元素围绕X轴和Y轴进行旋转,本文主要学习3D转换中的rotateX()方法和rotateY()方法:

1. rotateX()方法

通过rotateX()方法,元素围绕其X轴以给定的度数进行旋转,例如下面这张图片:

google-logo.png

如果采用之前的2D旋转函数使其旋转180度,则最终的效果如下图:

transform:rotate(180deg);

CSS-3D旋转.png

下面使用rotateX()这个方法让该图片旋转180度看看效果如何:

transform:rotateX(180deg);

此时得到的画面与2D旋转时有所不同,2D旋转相当于得到一个中心对称的图形,而3D旋转得到的是轴对称的图形:

CSS-3D旋转2.png

这里的X轴可以理解为眼前所看到的一条水平线,将笔记本电脑屏幕打开或合上的过程就类似于rotateX()方法的旋转:

CSS3D旋转.jpg

如果元素围绕X轴旋转90度,则此时元素相当于与眼前的屏幕垂直,所以这时候这个角度元素不可见,相当于笔记本电脑屏幕合上的时候,水平向前的视角是看不见屏幕的。

2. rotateY()方法

通过rotateY()方法,元素围绕其Y轴以给定的度数进行旋转,例如刚才的图片,如果围绕Y轴旋转180度:

 transform:rotateY(180deg);

此时得到的效果如下图,与原图也是轴对称的关系:

CSS3D旋转3.png

这里的Y轴可以理解为眼前出现的一条竖直的直线,假如眼前有一位钢管舞女郎,那么她围绕钢管旋转的过程就相当于rotateY()方法的旋转:

beauty.jpg

当然,屏幕上出现的元素和人体不同,在平面内的元素是没有“厚度”的,所以当元素围绕Y轴旋转90度的时候,相当于与屏幕垂直,所以这个角度该元素不可见。

将3D旋转的过程定义为动画,会更容易看出旋转的过程,3D旋转动画demo请点这里查看

此外,3D变换还有个属性backface-visibility:hidden,该属性定义当元素不面向屏幕时元素不可见。例如刚才的Google标志,当3D旋转角度超过90度的时候,我们实际上看到的就是该标志的“背面”,如果不希望观众看到元素的背面,就可以添加一个该属性……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/30.html