CSS3:2D 转换方法
css吧
全部回复
仅看楼主
level 13
首首zero 楼主
matrix(n,n,n,n,n,n):定义 2D 转换,使用六个值的矩阵。
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 旋转,在参数中规定角度。
skew(x-angle,y-angle):定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle):定义 2D 倾斜转换,沿着 X 轴。
skewY(angle):定义 2D 倾斜转换,沿着 Y 轴。
2023年02月03日 02点02分 1
level 8
(1)translate() 方法:设置元素的移动。
transform:translate(0px,0px);(把元素从左侧移动 0 像素,从顶端移动0 像素。)
(2)rotate() 方法:设置元素的旋转角度。(正值顺时针,负值逆时针)
 transform:rotate(50deg); (顺时针旋转 50 度。)
 transform:rotate(-50deg);(逆时针旋转 50 度。)
(3)scale() 方法:设置元素的尺寸增加或减少。
transform:scale(3,6);(第一个x值把宽度转换为原始尺寸的 3 倍,第二个y值把高度转换为原始高度的 6 倍。)
(4)skew() 方法:设置元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。
transform:skew(45deg,45deg);( 围绕 X 轴把元素翻转 45 度,围绕 Y 轴翻转 45 度。)
(5)matrix() 方法:会把所有2D 转换方法组合在一起,它需要六个参数,可以将元素进行:旋转、缩放、移动以及倾斜。
2023年02月03日 03点02分 2
level 12
学习了
2023年02月07日 02点02分 3
1