Transform: 改变(transform)

简介

Transform是一种CSS属性，用于对元素进行各种变换，比如旋转、缩放、平移和倾斜。它可以用来创建各种有趣的视觉效果，如旋转的图标、缩放的图像或平移的文本。

变换类型

旋转

transform: rotate(角度);

将元素旋转指定角度。

缩放

transform: scale(比例);

将元素缩放指定比例。

平移

transform: translate(水平位移, 垂直位移);

将元素平移指定距离。

倾斜

transform: skew(水平角度, 垂直角度);

将元素倾斜指定角度。

变换函数

除了基本的变换类型外，Transform还支持一些函数，可以组合或修改变换效果。

translateX()

transform: translateX(水平位移);

沿X轴平移元素指定距离。

translateY()

transform: translateY(垂直位移);

沿Y轴平移元素指定距离。

scale3d()

transform: scale3d(x比例, y比例, z比例);

对元素进行3D缩放。

rotate3d()

transform: rotate3d(x角度, y角度, z角度, 旋转角度);

对元素进行3D旋转。

应用示例

Transform可以在各种情况下使用，包括：

旋转按钮


button {transform: rotate(45deg);
}


缩放图像


img {transform: scale(1.5);}


平移动画


element {animation: move 1s infinite;}@keyframes move {from { transform: translate(0, 0); }to { transform: translate(100px, 100px); }}


浏览器支持

Transform属性得到了所有现代浏览器的广泛支持。

结论

Transform是一个强大的CSS属性，可以用来创建各种视觉效果。通过了解不同的变换类型和函数，你可以充分利用它来增强网站和应用程序的外观和交互性。