css中2D/3D的变化

变换可以改变元素的位置、大小、旋转、倾斜等属性，以创建各种动态效果。

一、常用的2D变换：

1. 平移（translate）：使用 translate() 函数来改变元素的位置。可以指定水平和垂直方向的偏移量，如 transform: translate(100px, 50px);

2. 缩放（scale）：使用 scale() 函数来改变元素的大小。可以指定水平和垂直方向的缩放比例，如 transform: scale(1.5, 0.8);

3. 旋转（rotate）：使用 rotate() 函数来旋转元素。可以指定旋转角度，正值表示顺时针旋转，负值表示逆时针旋转，如 transform: rotate(45deg);

4. 倾斜（skew）：使用 skew() 函数来倾斜元素。可以指定水平和垂直方向的倾斜角度，如 transform: skew(10deg, -5deg);

二、3D变换：

CSS提供了更多的变换函数，可以在3D空间中进行操作：

1. 平移（translate）：与2D变换类似，使用 translate3d() 函数指定沿着X、Y、Z轴的偏移量。

2. 缩放（scale）：与2D变换类似，使用 scale3d() 函数指定沿着X、Y、Z轴的缩放比例。

3. 旋转（rotate）：与2D变换类似，使用 rotate3d() 函数指定围绕X、Y、Z轴旋转的角度。

4. 透视（perspective）：使用 perspective() 函数设置元素的透视效果。可以通过调整透视距离来改变元素近大远小的效果。

通过组合和动画，可以在元素上同时应用多个变换，从而创建出更复杂的效果。例如，可以使用过渡（transition）和关键帧动画（keyframes animation）来创建平滑的过渡和动画效果。

三、案例：

使用过渡（transition）创建平滑的过渡效果：

/* 过渡效果 */
.transition {
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease;
}

/* 鼠标悬停时触发过渡 */
.transition:hover {
  background-color: black;
}

使用关键帧动画（keyframes animation）创建平滑的动画效果：

/* 关键帧动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 应用动画 */
.animation {
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 具有动画效果的元素 */
<div class="animation">这是一个旋转动画</div>

.transition 类将在鼠标悬停时触发背景颜色的过渡效果。.animation 类则可以使带有该类的元素执行旋转动画，持续时间为 2 秒，无限循环。