变形（transform）平移
1.变形是指通过css来改变元素的形状或位置。变形不会影响到页面的布局。
2.transform（用来设置元素的变形效果）
-平移：
-translateX() 沿x轴方向平移
-translateY() 沿y轴方向平移
-translateZ() 沿z轴方向平移（调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。
-平移元素百分比是相对于自身计算的，多个用空格隔开。一个元素只能设置一个transform，否则会被覆盖。
3.元素居中：
.box {
background-color: green;
position: absolute;
/*需要设置宽高居中，只适用于元素大小确定的*/
200px;
height: 200px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/*不用设置宽高，被内容撑开居中*/
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
4.z轴属于立体效果（近大远小），默认情况下网页是不支持透明，如果想要看见效果必须要设置网页的视距。
html {
perspective: 800px;
}
旋转
1.通过旋转可以使元素沿着 x y 或 z 旋转指定的角度
-旋转：
-rotateX()
-rotateY()
-rotateZ()
-transform: rotateX(45deg)
-transform: rotateX(.25turn)
2.backface-visibility: 是否显示元素的背面
-可选值：
-visible 显示 默认值
-hidden 隐藏
缩放
1.对元素进行缩放的函数。
-缩放：
-scaleX() 水平方向缩放
-scaleY() 垂直方向缩放
-scaleZ() z轴方向缩放（需要设置3D效果才能看出）
-scale() 双方向缩放
透明
1.opacity：为元素设置透明效果
-opacity: 0.5;
transform-style、transform-origin
1.transform-style:设置3d变形效果
-tranform-style: preserve-3d;
2.transform-origin: 设置变形的原点
-transform-origin: center;（默认值）
-transform-origin: 20px 20px;
学识浅薄，如有错误，恳请斧正，在下不胜感激。