1. CSS3 transform 新特性

书诚小驿2025/02/22前端面经Css

一、常见的变换类型

transform 是 CSS3 中非常强大的一个属性，用于对元素进行变换操作，比如平移、旋转、缩放和倾斜等。

1、平移（Translate）

translate(x, y)：在水平和垂直方向上移动元素。
translateX(x)：仅在水平方向上移动元素。
translateY(y)：仅在垂直方向上移动元素。

.box {
  transform: translate(50px, 100px);
}

2、旋转（Rotate）

rotate(angle)：围绕中心点旋转元素。
rotateX(angle)：围绕 X 轴旋转元素。
rotateY(angle)：围绕 Y 轴旋转元素。
rotateZ(angle)：围绕 Z 轴旋转元素（等同于 rotate(angle)）。

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

3、缩放（Scale）：

scale(x, y)：在水平和垂直方向上缩放元素。
scaleX(x)：仅在水平方向上缩放元素。
scaleY(y)：仅在垂直方向上缩放元素。
scaleZ(z)：仅在 Z 轴方向上缩放元素。

.box {
  transform: scale(1.5, 0.5);
}

4、倾斜（Skew）：

skew(x, y)：在水平和垂直方向上倾斜元素。
skewX(x)：仅在水平方向上倾斜元素。
skewY(y)：仅在垂直方向上倾斜元素。

.box {
  transform: skew(20deg, 10deg);
}

5、矩阵变换（Matrix）：

matrix(a, b, c, d, e, f)：通过一个矩阵来定义复杂的变换。

.box {
  transform: matrix(1, 0, 0, 1, 50, 100);
}

6、3D 变换：

translate3d(x, y, z)：在三维空间中移动元素。
rotate3d(x, y, z, angle)：在三维空间中旋转元素。
scale3d(x, y, z)：在三维空间中缩放元素。

.box {
  transform: translate3d(50px, 100px, 20px);
}

二、常见的 CSS3 transform 面试题

题目描述

请使用 CSS3 的 transform 属性实现以下效果：

将一个元素水平移动 100px，垂直移动 50px。
将一个元素围绕中心点逆时针旋转 45 度。
将一个元素在水平方向上放大 2 倍，在垂直方向上缩小为原来的一半。
将一个元素倾斜 20 度（水平方向），10 度（垂直方向）。
将一个元素在三维空间中沿 Z 轴移动 100px，并围绕 Y 轴旋转 30 度。

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transform Example</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px;
        transition: transform 0.5s ease;
      }
    </style>
  </head>

  <body>
    <div class="box translate"></div>
    <div class="box rotate"></div>
    <div class="box scale"></div>
    <div class="box skew"></div>
    <div class="box rotate3d"></div>
  </body>
</html>

参考答案

DETAILS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transform Example</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 50px;
        transition: transform 0.5s ease;
      }

      .translate {
        transform: translate(100px, 50px);
      }

      .rotate {
        transform: rotate(45deg);
      }

      .scale {
        transform: scale(2, 0.5);
      }

      .skew {
        transform: skew(20deg, 10deg);
      }

      .rotate3d {
        transform: translateZ(100px) rotateY(30deg);
      }
    </style>
  </head>
  <body>
    <div class="box translate"></div>
    <div class="box rotate"></div>
    <div class="box scale"></div>
    <div class="box skew"></div>
    <div class="box rotate3d"></div>
  </body>
</html>

1. CSS3 transform 新特性

目录