CSS-2D转换

1.translate

实现元素位移的效果。

语法

/* X是x轴上移动的位置，Y是y轴上移动的位置 */
transform: translate(X,Y)
/* 只移动x坐标 */
transform: translateX(n)
/* 只移动y坐标 */
transform: translateY(n)

特点

• 不会影响其他元素的位置
• tranlate(m%, n%)，里面的参数使用百分号时，移动的距离是根据盒子自身的宽度或高度来进行对比的

div {
	width: 200px;
	height: 100px;
	/* 30%-> 200px*30%=60px */
	/* 50%-> 100px*50%=50px */
	tranform: translate(30%, 50%);
}

• 对行内元素（例如span）没有效果

---

2.rotate

实现元素旋转的效果。

语法

/* rotate要跟度数的单位deg */
transform: rotate(度数deg)

特点

• 度数为正值，顺时针旋转；度数为负值，逆时针旋转
• 旋转的中心点默认为盒子的中心

---

3.scale

使得元素放大和缩小，即进行缩放。

语法

transform: scale(X,Y)

特点

• X和Y写的是数字，不跟单位，是倍数的意思
• 若宽度和高度等比例缩放，仅需写一个参数
• 不会影响其他的盒子，同时可以设置缩放的中心点

---

4.transform-origin

设置元素转换的中心点

语法

transform-origin: X Y;

特点

• X和Y可以是像素px，也可以是方位名词（top bottom left right center）

div {
	width: 200px;
	height: 200px;
	background-color: pink;
	margin: 100px auto;
	transition: all 1s;
	transform-origin: left bottom;
}

div:hover {
	transform: rotate(360deg);
}