CSS3-3D变形复合样式写法过程分析

CSS变形样式transform的复合

在CSS中可以对元素进行诸如位移，旋转和缩放倾斜等一系列变形操作，比如：transform：translateX(10px);可将元素向右位移10px的距离transform:rotate(30deg);则将元素绕自身水平中线顺时针旋转30度。
如下图示例：

以上为对元素进行的仅一种且一次的变形操作。在这个过程中，由于在初始状态x轴和y轴与页面边框平行，对开发新手而言不会造成困难理解，事实上，坐标系会随着元素的变形而跟着一起变形，这在仅有一次的变形中并不会有过多影响，但是当需要进行多次多种变形时，往往选择transform的复合写法，而在复合写法中，一次变形会使元素坐标系跟随着也进行相应变形从而对另外的变形造成影响，这种情况对于新手开发者会造成一定的理解困难。

坐标系变形过程

在复合写法中势必要对元素进行了多次变形，而先进行的变形会使变形坐标系跟着一起变形，如此将会影响后面的变形。
比如：
transform{translateX(10px) rotate(30deg)}：该元素会先水平向右位移10px，同时坐标系整体向右位移10px，之后元素绕新的变形基点顺时针旋转30度。
transform{ rotate(30deg) translateX(10px)} ：该元素会先绕自身中心点顺时针旋转30度，同时坐标系整体旋转30度，之后元素沿着新的x轴位移10px。
transform{scale(2)translateX(10px)}：该元素及其变形坐标系会放大2倍，之后在新坐标系中沿x轴向右位移10px（实际效果会位移20px）。
如图所示：

由此可以发现，位移变形不会改变坐标系轴的方向和比例，仅会改变坐标系原点的位置，因此坐标系会保持默认的样式，而其他的变形方式则会使坐标系发生一定的变形，尤其在做带有3D效果的样式时，如果不对坐标系变化有一定的理解会造成开发过程中的误解，这尤其是新手开发者应当注意的事项。

示例

以下以制作3D平面旋转为例便于对坐标系变形进一步理解。
首先，我们写出一个块状元素结构。

为了实现3D效果，我们需要给父容器body一个透视观点，景深500px，同时使元素绕x轴旋转60度。

实现效果如下：

接下来要使元素在绕x轴旋转60度的同时实现水平自转，因坐标系整体也绕x轴旋转了60度，z轴也由默认的垂直于屏幕绕原点旋转了60度，即z轴始终保持与容器平面垂直。因此在transform的复合样式中rotateX(60deg)的后面加上第二个旋转rotateZ(180deg)，为能够更好地观察变形效果，以hover的形式写出，同时使transition-duration：5s，即过渡时间5s。

实现效果如下：