CSS 变换属性

在 CSS 中，变换属性可以用来对元素进行变换，包括旋转、缩放、移动、倾斜等，从而实现更丰富的样式效果。以下是 CSS 中的常用变换属性：

transform

transform 属性可以用来对元素进行变换，常用的可选值包括：

• none：不进行变换。
• translate()：平移元素，接受一个或两个参数，分别表示水平和垂直方向的距离。
• rotate()：旋转元素，接受一个表示旋转角度的参数。
• scale()：缩放元素，接受一个或两个参数，分别表示水平和垂直方向的缩放比例。
• skew()：倾斜元素，接受一个或者两个参数，分别表示水平和垂直方向的倾斜角度。

示例代码：

div {
  transform: translate(10px, 20px) rotate(45deg) scale(1.5);
}

在上面的示例中，div 元素会被平移 10 像素到右边，20 像素到下面，然后被旋转 45 度，最后被水平和垂直方向分别放大 1.5 倍。

transform-origin

transform-origin 属性用来定义变换的起点，即变换的中心点，默认情况下为元素的中心点。可选值包括百分比和具体的像素值。

示例代码：

div {
  transform: rotate(45deg);
  transform-origin: top left;
}

在上面的示例中，div 元素会被旋转 45 度，并以左上角作为变换起点。

perspective

perspective 属性用来定义 3D 空间到视口的距离，即视点距离屏幕的距离。该属性只对 3D 元素有效，并且通常与 transform-style 属性一起使用。

示例代码：

.container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.box {
  transform: rotateY(45deg);
}

在上面的示例中，.container 容器定义了视点距离屏幕为 1000 像素，.box 元素被绕 Y 轴旋转了 45 度，并展现出 3D 效果。

transition

transition 属性用来定义元素从一种样式到另一种样式的过渡效果，可以通过设置不同的变换值来实现平滑过渡。

示例代码：

button {
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}

button:hover {
  transform: translateY(-10px);
}

在上面的示例中，当鼠标悬停在按钮上时，button 元素会通过 translateY() 方法向上平移 10 像素，并在 0.3 秒的时间内实现平滑过渡效果。