transform（变形）

介绍

1、变形就是指通过CSS来改变元素的形状或位置

2、变形不会影响到页面的布局

3、变形不会导致脱离文档流

4、transform用来设置元素的变形效果

---

translate（平移）

平移：

		translateX() 沿x轴方向平移
		
		translateY() 沿y轴方向平移
		
		translateZ() 沿z轴方向平移

示例：
		translateX(100px) 沿x轴方向平移
		
		translateY(-100px) 沿y轴方向平移
		
		translateZ() 沿z轴方向平移

注：

在平移元素时，百分比是相对于自身计算的

---

垂直水平居中

position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
				`这种居中方式，只适用于元素的大小确定的时候`

position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
				`这种居中方式，适用于不确定元素的大小的时候`

---

Z轴平移

1、Z轴平移，调整元素在Z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

2、Z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视效果的，如果需要看见效果，必须要设置网页的视距

视距

html{
`设置当前网页的视距为800px，人眼距离网页的距离，
一般是600px-1200px之间`
perspective: 800px;
}

---

设置3D效果

transform-style: preserve-3d;
				`设置3D效果，transform默认是2d效果的变形`

---

transform-origin（变形的原点）

transform-origin:20px 20px;
			`默认值: center`