[注意]由于transform属性是从前向后的顺序解析属性值的，所以一定要把perspective()函数写在其他变形函数前面，否则将没有透视效果
变形原点
变形2d时已经讲过变形原点，2d变形原点由于没有z轴，所以z轴的值默认为0。而3d变形原点的z轴是一个可以设置的变量
transform-origin
值: x轴 y轴 z轴
初始值: 50% 50%
应用于: 非inline元素(包括block、inline-block、table、table-cell等)
继承性: 无
[注意]IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀，其他更高版本浏览器可使用标准写法x轴: left | center | right | <length> | <percentage>y轴: top | center | bottom | <length> | <percentage>z轴: <length>
对于x轴和y轴来说，可以设置关键字和百分比，分别相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
//变形元素默认样式是 transform:rotate3d(1,1,1,45deg);
背景可见
元素的背面默认是可见的。但有时需要让元素背面不可见，这就要用到属性backface-visibility
backface-visibility: 设置元素背面是否可见
visible:可见，默认hidden:不可见
//设置一个元素包含两个半透明子元素绝对定位重叠，内容分别为A和B，来表示一个元素的正面和背面
[注意]若一个元素覆盖于另一个元素上，不仅仅是正面覆盖，背面也是覆盖的变形风格
变形风格transform-style允许变形元素及其子元素在3d空间中呈现。变形风格有两个值。flat是默认值，表示2d平面；而perserve-3d表示3d空间
[注意]当设置了overflow:非visible或clip:非auto时，transform-style:preserve-3d失效transform-style: flat | preserve-3d
以上这篇深入剖析CSS变形transform(3d)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
