CSS3 3D 特效视频资料分享

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

《CSS3 3D 特效视频教程》是通过CSS3 当中的transition属性、perspective属性、transform属性来创建真实可用的三维效果。

视频播放地址：http://www.php.cn/course/416.html

本视频学习难点

一、旋转和倾斜的方向

　　对于旋转和倾斜变化，最重要的便是他们的默认变换方向。

　　对于旋转变换，其默认是沿着基准轴正方向（由使用的旋转方法决定，如：rotateX()的基准轴就是X轴）做顺时针变换。将上图中黑色边框包围的平面看做一个元素，以X轴作为基准轴；此时，若将元素旋转（+）30°，即是将黑色平面固定在X轴上，将Y轴正方向的一边往上掀起来（就像掀起一块木板，被掀起的木板仍然在一个平面内，而不会像翻书一样发生弯曲）。rotateY()同理。rotateZ()相当于2d变换的rotate()方法，就是将元素顺时针转动。

rotatex

rotatey

rotatez

　　对于倾斜变换，X轴和Y轴方向相反。skewX()是将元素的垂直边逆时针（也就是向左）倾斜，而skewY()是将元素的水平边顺时针（也就是向下）倾斜。

skewx

skewy

 二、变换基点、视点与视距

　　默认地，CSS3变换的基点是元素的中心点，即：进行变换（仅限旋转、倾斜和缩放）后，元素中心点的坐标不变，例如：元素初始位置与屏幕左上角重合，宽高均为100px，旋转30°后，元素中心点坐标仍然是（50,50）。

　　视点是另一种基点，它只用于3d变换。理解视点，可以借助于透视思想。我们应该对这局话都有印象--“两条平行直线在无穷远处相交”。三维空间中的直线原本不可能相交，在无穷远处也一样，但投射到人眼中，原本平行的直线因产生“透视”现象，会不断相互接近，直到交于一点。

　　不过，视点并不是线的交点，上图中的视点，其实是在平面的最外面，也就是在中间的立方体冲向屏幕外面的表面上。CSS的视点原理相同，只不过是模拟人眼在某个位置时，能够看到的该元素当时的样子，也就是能够像上图中不同位置的立方体，在人眼位于“视点”时，会呈现不同的表面让人看到，视点就是用于模拟这种三维的元素呈现方式的一个属性。

　　而另外一个不得不说的属性就是视距了。顾名思义，视距就是物体距离视点的距离。根据“透视”原理，物体会呈现近大远小的特点，当元素足够近而又大到足够遮挡人眼，人就不能看到其他东西了；当元素足够远，那么它将会显示的非常小，甚至看不见。perspective属性需要与translateZ()方法配合“食用”，为父元素设置perspective，同时，向子元素应用translateZ()方法，即：父元素用于模拟人眼位置，子元素就是你要看的物体。未对子元素应用translateZ()方法时，相当于translateZ(0)，元素显示它原本的大小；平移的距离越接近视距（不超过），元素就呈现地越大；反之，越小；而当平移距离超过视距后，元素就消失了，相当于物体跑到了人眼后方，自然就看不到了。perspective的工作原理是以元素设置的原本大小作为元素在视距处的大小，因此，平移(+)的距离，元素会变大；平移(-)的距离，元素就能变小，但必须是设置了视距的情况下才有效。

　　此外，如上面透视图中所示，不同位置的物体会呈现不同的样子。在CSS中，想要实现这样的效果，可以为父元素设置视距，然后给多个子元素应用变换。

以上是CSS3 3D 特效视频资料分享的详细内容。更多信息请关注PHP中文网其他相关文章！