CSS-2D转换

2D 转换

• translate()
• rotate()
• scale()

translate()

通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标) 和 top（y 坐标） 位置参数

/*从左侧移动 50 像素，从顶端移动 100 像素*/
div {
	transform: translate(50px,100px);
}

rotate()

元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div {
	/*顺时针旋转 30 度*/
	transform: rotate(30deg);
}

scale()

根据给定的宽度（X 轴）和高度（Y 轴）参数增大或缩小

div {
	/*把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍*/
	transform: scale(2,4);
}

注意 :

• 取值是1, 代表不变
• 取值大于1, 代表需要放大
• 取值小于1, 代表需要缩小
• 水平和垂直缩放都一样, 那么可以简写为一个参数

div {
	/*把宽度和高度转换为原始尺寸的 2 倍*/
	transform: scale(2);
}

2D Transform 方法

函数	描述
translate(x,y)	2D 转换，沿着 X 和 Y 轴移动元素
translateX(n)	2D 转换，沿着 X 轴移动元素
translateY(n)	2D 转换，沿着 Y 轴移动元素
scale(x,y)	2D 缩放转换，改变元素的宽度和高度
scaleX(n)	2D 缩放转换，改变元素的宽度
scaleY(n)	2D 缩放转换，改变元素的高度
rotate(angle)	2D 旋转，在参数中规定角度

注意 :

• 进行多个转换用空格隔开
• 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

形变中心点

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

div {
	/*左上中心点*/
	transform-origin: left top;
}

注意 :

• 给需要转换的元素添加
• 取值有三种形式
  • 具体像素
  • 百分比
  • 特殊关键字 left top center bottom right

透视

近大远小
注意 :

• 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
• 值越小效果越明显

div {
	perspective: 500px;
}