CSS3-3D相关知识详解—视角以及变形方向

CSS3-3D相关知识详解—视角以及变形方向

HTML5学堂：视角以及变形方向。HTML5中非常不错的一个变革，便是将特效从二维平面上的变化，推进到了三维立体当中。而实现这个的功能就是CSS3！对于三维立体特效的制作，视角以及3D坐标体系的基本知识是实现炫美动画的基础。

CSS3三维立体变形的旋转方向

三维世界中的坐标系如下：

3D transform中有下面这三个方法：rotateX(angle); rotateY(angle); rotateZ(angle)

当angle为正值时，这三种方法的旋转方向是从圆心往坐标轴延伸方向上看时的逆时针方向。

CSS3 perspective 属性

perspective 属性设置的是元素被查看位置的视角.目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

需要注意一点的是，perspective仅对3D转换元素有影响。

当不进行perspective的设置时，默认为不设置透视，如果设置值为0，则也默认为不设置透视。如果设置了非0的数字，则代表元素距离视图的距离，以像素计。

CSS3 perspective-origin 属性

perspective-origin属性定义3D元素所基于的X轴和Y轴。此属性允许改变3D元素的底部位置。当为元素定义 perspective-origin属性时，其子元素会获得透视效果，而不是元素本身

需要注意的有两点，其一，它的兼容性与perspective的兼容性完全相同，只有谷歌和苹果支持替代性的属性；其二，必须与perspective属性一起使用，且仅仅对3D转换造成影响。

属性的取值：可以是百分比或者像素或者top、left、center、right、bottom等

欢迎沟通交流~HTML5学堂