The following introduces the 2D/3D conversion properties of CSS
【compatible】
IE9+ and other mainstream browsers, Opera only supports 2D conversion
Since almost all browsers currently render this property inefficiently, we can use the following hack to improve rendering efficiency,
Compatible with hack writing:
-ms-transform/* IE 9 */
-moz-transform/* Firefox */
-webkit-transform/* Safari 和 Chrome */
-o-transform/* Opera */
【content】
1. transform (transform) applies a 2D or 3D transformation to an element, this property allows the element to be displaced, rotated, scaled or skewed;
2. transform-origin allows changing the position of the transformed element;
3.transform-style (transform style) specifies whether the child element retains the 3D position;
4. perspective (perspective) specifies the perspective effect of 3D elements;
5. perspective-origin specifies the bottom position of the 3D element;
6.backface-visibility (back visibility) defines whether the element is visible when not facing the screen;
【Details】
(1) transform applies a 2D or 3D transformation to an element
Mainly ①translate displacement; ②scale ratio (scaling); ③rotate rotation; ④skew tilt; ⑤matrix matrix;
Introduce in sequence:
①translate displacement;
translate(x,y) defines the 2D translation (displacement)
translate3d(x,y,z) defines the 3D translation
translateX(x) defines the transformation, just using the value of the X axis (displacement)
translateY(y) defines the transformation, just using the value of the Y axis (displacement)
translateZ(z) defines the 3D translation, just using the Z axis value
②scale ratio (zoom)
scale(x,y) defines the 2D scaling transformation
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(x) 通过设置 X 轴的值来定义缩放转换
scaleY(y) 通过设置 Y 轴的值来定义缩放转换
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
③rotate旋转
rotate(angle) 定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
④skew倾斜
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
⑤matrix矩阵
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵
（2） transform-origin（变换原点）设置变换的原点，允许改变被转换元素的位置；
语法：
transform-origin: x-axis y-axis z-axis;
x-axis：定义视图被置于X轴的何处； y-axis ：置于Y轴何处；z-axis：置于Z轴何处；
<style type="text/css">
#div1{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
<div id="div1">
<div id="div2">HELLO</div>
</div>
（3）transform-style（变换风格）规定子元素是否保留3D位置
【兼容】IE不支持，Firefox 支持该属性，Chrome、Safari 和 Opera 支持hack写法-webkit-transform-style
属性值：flat（平面）；preserve-3d（保留3D）
flat（平面） 子元素将不保留其 3D 位置
preserve-3d（保留3D） 子元素将保留其 3D 位置
<style type="text/css">
#div1{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
分析：这里我对div2元素设置-webkit-transform-style: preserve-3d属性，那么其子元素div3就保留了3D位置，显示为3D；若改为flat，则div3会显示为平面，失去3D位置
（4）perspective（透视）规定 3D 元素的透视效果，通俗理解就是定义3D元素距视图的距离，以像素计
作用：近大远小,近宽远窄---使渲染更加逼真，且具有层次
兼容：Chrome 和 Safari 支持hack写法的 -webkit-perspective 透视属性
默认值为none，与0相同，即不设置透视
<style type="text/css">
#div1{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
<div id="div1">
<div id="div2">HELLO</div>
</div>
（5）perspective-origin（透视来源）规定 3D 元素的底部位置
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴，该属性允许改变 3D 元素的底部位置
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身
【注释】：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素
语法：
perspective-origin: x-axis y-axis;
（6）backface-visibility（背面能见度）定义元素在不面对屏幕时是否可见，如果在旋转元素不希望看到其背面时，该属性很有用
【兼容】IE10+ 和 Firefox 支持 backface-visibility 属性；Opera 15+、Safari 和 Chrome 支持hack写法的 -webkit-backface-visibility 属性
属性值：visible（可见）背面可见；hidden（隐藏）背面不可见
下面举个简单例子：
本例有两个 div 元素，均旋转 180 度，背向用户。第一个div元素的 backface-visibility 属性设置为hidden，所以应该是不可见的
<style type="text/css">
div{
position:relative;
height:60px;
width:60px;
border:1px solid #000;
background-color:yellow;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
-moz-transform:rotateY(180deg); /* Firefox */
}
#div1{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
}
#div2{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
-ms-backface-visibility:visible;
}
</style>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
最后分享个实践例子：
<style type="text/css">
.div1{
position: relative;
height: 150px;
width: 150px;
margin: 0px;
padding:2px;
border: 1px solid black;
perspective:550;
-webkit-perspective:550;
perspective-origin: 50% 100px;
-webkit-perspecitve-origin: 50% 100px;
}
.div2{
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-webkit-animation: rotateXing 1.8s infinite linear;
animation: rotateXing 1.8s infinite linear;
width:148px;
height:148px;
text-align:center;
line-height:148px;
}
.div3{
position: absolute;
border: 1px solid black;
background-color: green;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-webkit-animation: rotateYing 2.8s infinite linear;
animation: rotateYing 2.8s infinite linear;
width:148px;
height:148px;
text-align:center;
line-height:148px;
}
@-webkit-keyframes rotateXing {
from {
transform: rotateX(1deg);
-webkit-transform: rotateX(1deg);
}
to {
transform: rotateX(359deg);
-webkit-transform: rotateX(359deg);
}
}
@keyframes rotateXing {
from {
transform: rotateX(1deg);
-webkit-transform: rotateX(1deg);
}
to {
transform: rotateX(359deg);
-webkit-transform: rotateX(359deg);
}
}
@-webkit-keyframes rotateYing {
from {
transform: rotateY(1deg);
-webkit-transform: rotateY(1deg);
}
to {
transform: rotateY(359deg);
-webkit-transform: rotateY(359deg);
}
}
@keyframes rotateYing {
from {
transform: rotateY(1deg);
-webkit-transform: rotateY(1deg);
}
to {
transform: rotateY(359deg);
-webkit-transform: rotateY(359deg);
}
}
</style>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
【拓展】
.