PHP前端开发

CSS3 中的 2D 变换

百变鹏仔 3个月前 (09-20) #CSS

2D变换用于通过平移、旋转、缩放和倾斜重新改变元素的结构。

以下表格包含了2D变换中常用的值

序号值和描述
1

立即学习“前端免费学习笔记(深入)”;

matrix(n,n,n,n,n,n)

用于定义具有六个值的矩阵变换

2translate(x,y)

用于在x轴和y轴上平移元素

3translateX(n)

用于在x轴上平移元素

4translateY(n)

用于在y轴上平移元素

5scale(x,y)

用于改变元素的宽度和高度

6scaleX(n)

用于改变元素的宽度

7scaleY(n)

用于改变元素的高度

8rotate(angle)

根据角度旋转元素

9skewX(angle)

定义沿x轴的倾斜变换

10skewY(angle)

定义沿y轴的倾斜变换