CSS3 transform 属性

CSS 属性 transform 用于对元素进行旋转、缩放、倾斜或平移等变换操作，可以实现丰富的动画效果和交互效果。

语法

transform: none | transform-functions | initial | inherit;

• none: 默认值，表示不进行任何变换操作。
• transform-functions: 一个或多个变换函数，可以同时应用多个变换操作。
• initial: 设置为属性的初始值。
• inherit: 继承父元素的值。

变换函数

旋转（rotate）

transform: rotate(45deg);

缩放（scale）

transform: scale(1.5);

倾斜（skew）

transform: skew(30deg, 20deg);

平移（translate）

transform: translate(50px, 20px);

矩阵变换（matrix）

transform: matrix(a, b, c, d, e, f);

3D 变换

transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

示例代码

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotate(45deg) scale(1.5) skew(30deg, 20deg) translate(50px, 20px);
}

以上就是 CSS 属性 transform 的详细介绍，通过合理运用 transform 属性，可以为网页元素添加出色的动画效果和交互效果。