CSS3的transform以及3D相关属性总结

CSS3的3D相关属性总结

概述

项目中遇到微交互、增加页面用户体验的需求，运用CSS3的transform变化的3D属性就可以达到效果。

transform概述

W3C 的解释： CSS Transforms  is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

即： css transform定义元素在二维、三维上空间上的变换；transform通过修改坐标空间、改变元素的形状、位置，并不会打乱正常文档流。

transform如何使用，有哪些属性呢？

一、 transform

1）backface-visibility

  元素的后端是否可见  该属性只用在 3D 变换中（即设置了Pespective透视点的元素中)

          

2）perspective

用户到 z=0 位置的距离

3D元素的一部分在 用户的后面，z坐标值 大于  perspective属性值，那么这部分不会被绘制

我们都知道近大远小的道理，对于没有 rotateX 以及 rotateY 的元素， translateZ 的功能就是让元素在自己的眼前或近或远 。比方说，我们设置元素 perspective 为 201 像素，如下：

      perspective: 201px;

则其子元素，设置的 translateZ 值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小 ）； translateZ 值越大，该元素也会越来越大，当 translateZ 值非常接近 201 像素，但是不超过 201 像素的时候（如 200 像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似 overflow:hidden 的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓 “ 一叶蔽目，不见泰山 ” ，就是这么回事。当 translateZ 值再变大，超过 201 像素的时候，该元素看不见了 —— 这很好理解：我们是看不见眼睛后面的东西的！ translateZ , 当 translateZ 为正值的时候，元素会向其面对的方向走去；如果元素无旋转，就会朝显示器走来。（该段摘自 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ ）

3）perspective-origin

The  perspective-origin  css property determines the position at which the viewer is looking

The  perspective-origin  property determines the origin for the  perspective  property by altering its vanishing  

我的理解是：通过改变消失点的位置，即视点的位置，3D图形就是从该视点出发观察整个3D图形的，如下图示：

      

        

4）rotate

旋转，写法如下：

     

5）scale

放大、缩小，写法如下：

      

6）translate

定义平移距离

      

7）总结写法如下

      

二、 transform-origin

The  transform-origin  css property sets the origin for an element's transformations 设置变换的起点

      

三、 transform-style

The  transform-style  css property determines if the children of an element are positioned in the 3D-space or are flattened in the plane of the element.

定义一个元素的子元素是否定位在3D元素中后者2D平面中

/* Keyword values */

transform-style : flat ;

transform-style : preserve- 3 d ;

四、 transform-box

定义了布局框

/* Keyword values */

transform-box : border-box ;

transform-box : fill-box ;

transform-box : view-box ;

参考

1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

2 . https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations