CSS transform变形记

还是那句话，能用CSS实现的就不用JS,下面来一起复习一下CSS transform的基础知识（多图）。

transform应用场景：实现文字或图像的旋转、缩放、倾斜、移动这四种类型在2D、3D空间的变形。

浏览器兼容性：

transform基础（实例运行于chrome浏览器之上，未考虑兼容）。

1、2D变换

1.1 旋转: transform:rotate(deg) //(默认旋转点是元素中心点50% 50% 0)，由下面实例可见roateX()效果类似于缩放，同理rotateY()。

1.2 扭曲：transform:skew(30deg, 80deg) //正值顺时针，负值逆时针

1.3 缩放：transform：scale(-2.0) //负值表示先反转再缩放

1.4 位移：transform：translate(200px, 100px) //始终相对于元素正中心（50% 50% 0）移动

1.5 矩阵matrix(线性代数矩阵相乘)

2、3D变换
2.1 translate3d位移

2.2 scale3d
2.3 rotate3d
2.4 translate3d
2.5 matrix3d

3、前置属性（常用于3d变换）
3.1 transform-origin:
指定元素变形的中心点（50% 50% 0）（XYZ轴的正向分别指往右往下靠近用户眼镜的方向）。
注：2D空间中的X-offset与Y-offset可以设px，也可以设百分比。还可以设置为top/right/bottom/left/center等。3D空 间中的Z-offset只能设px。

3.2 transform-style:
用于指定舞台（即变形元素的父元素）为2D或3D，值分别为flat和preserve-3d，默认为flat。
注：如果同时设置了transform-style: preserve-3d和overflow: hidden, 3D效果将失效。因为overflow: hidden 会将所有元素flatten。

3.3 perspective:
视距，指屏幕距离用户眼镜的距离，默认为none，只能设置px。
注：值越小表示用户眼睛距离屏幕越近，相当于创建一个较大的3D舞台。反之，值越大表示用户眼睛距离屏幕越远，相当于创建一个较小的3D舞台。这很容易理解，离的越近东西看起来越大，离的越远东西看起来越小。

3.4 backface-visibility:
是否可以看见3D舞台背面，默认值visible表示背面可见，可以设成hidden让背面不可见，多用于图片旋转场合。

层级关系：设置了transform的元素与absolute/relative/fixed同级，请用z-index设置覆盖关系。

下面是一个利用transform+transition实现的旋转正方体，那么问题来了，你可以独立实现这份小作业嘛？