CSS Transform属性
transform 属性用于对元素进行位移、旋转、缩放和倾斜等变换操作。
1. ==> translate
移动元素的位置,可以沿X轴和Y轴进行移动。
transform: translate(50px, 50px);
效果: 将元素向右下方移动50像素。
2. ==> rotate
旋转元素。
transform: rotate(45deg);
效果: 将元素顺时针旋转45度。
3. ==> scale
缩放元素的大小。
transform: scale(1.5);
效果: 将元素放大1.5倍。
4. ==> skew
倾斜元素。
transform: skew(10deg, -5deg);
效果: 将元素沿X轴和Y轴分别倾斜10度和逆时针倾斜5度。
5. ==> matrix
通过数学变换矩阵进行变换。
transform: matrix(a, b, c, d, tx, ty);
效果: 使用变换矩阵对元素进行复杂的变换,其中a、b、c、d用于缩放和旋转,tx和ty用于位移。
6. ==> perspective
给元素应用透视效果。
transform: perspective(100px);
效果: 给元素应用100像素的透视效果,使其看起来有深度。
7. ==> rotateX、rotateY、rotateZ
分别绕X轴、Y轴和Z轴旋转元素。
transform: rotateX(45deg);
效果: 绕X轴顺时针旋转元素45度。
8. ==> scaleX、scaleY、scaleZ
分别沿X轴、Y轴和Z轴缩放元素。
transform: scaleX(2);
效果: 沿X轴将元素放大2倍。