transforms 主要包括了两个属性
transform 只可以转换 由盒子模型定位的元素,而根据经验也就是 具备了
display:block
这个属性,由盒子模型定位元素。
transform
指定作用在元素上的变形, 取值为空格分隔的一些列变形的列表,他们会像是被组合操作请求一样被分别执行。
transform-origin
指定原点的位置,默认值为元素的中心,可以被移动,很多变形需要用到这个属性。
例如:
- 旋转
- 缩放
- 倾斜
2D转换
注意,所有的转换,都是在原有占有位置的基础上再次处理样式而来,所以即使你的元素已经偏移了很远,但是你的元素依然在原有位置占据着一定的空间。
- translate()
- rotate()
- scale()
- matrix()
translate() 偏移
元素从当前位置移动,根据给懂的left(x轴坐标)和top(y坐标)的位置参数。
translate(50px,100px)
元素向右侧移动50px,向下侧移动100px
rotate() 顺时针旋转角度
元素顺时针旋转给定的角度deg
,允许负值,负值的情况元素会逆时针旋转
rotate(30deg)
程序顺时针旋转30度
scale()方法 缩放元素
通过scale方法,元素的尺寸会增加或者减少,根据给定的宽度(X轴)或者高度(Y轴)
scale(2,4)
水平放大为原有2倍,高度为原来四倍。
skew() 元素翻转
skew()方法把元素翻转给定的角度,根据给定的水平线和垂直线参数
skew(-10deg,0deg)
会把元素顺时针向右倾斜翻转10°。
matrix() 矩阵结合所有的2D转换方法
matrix()
结合了2D转换方法,需要六个参数,包含了数学函数???????
transform:matrix(0.866,0.5,-0.5,0.866,0,0);