css变换语法介绍及案例展示

CSS 变换介绍

一、基础变换函数 - 2D

transform 是用于对元素进行 2D/3D 变换的核心属性，支持平移、旋转、缩放、倾斜等效果，且不破坏原有文档流布局。

1. 变换函数概览

变换类型	函数语法	核心描述	应用场景
平移	`translateX(x)translateY(y)translate(x, y)`	沿 X/Y 轴移动元素，参数可为像素或百分比（百分比相对于元素自身尺寸）	微调元素位置、悬停偏移效果
旋转	`rotate(angle)`	以元素中心为基点顺时针旋转，需加单位 deg（负值为逆时针）	图标旋转、卡片翻转
缩放	`scaleX(sx)scaleY(sy)scale(sx, sy)`	X/Y 轴按比例缩放，单参数时等比例缩放（>1 放大，<1 缩小，支持百分比）	悬停放大、焦点突出
倾斜	`skewX(angle)skewY(angle)skew(x-angle, y-angle)`	沿 X/Y 轴扭曲元素形状，参数为倾斜角度（支持负值）	斜切导航栏、动态图表

2. 平移变换（Translate）

语法：

css 复制代码

transform: translateX(10px);      /* 沿 X 轴平移 10px */
transform: translateY(20%);       /* 沿 Y 轴平移自身高度的 20% */
transform: translate(10px, 20px); /* 沿 X 轴平移 10px，沿 Y 轴平移 20px */

使用场景：

微调元素位置，不影响其他元素布局
实现悬停时的偏移效果
配合过渡动画实现平滑移动

css 复制代码

/* 悬停时向右上方移动 */
.box:hover {
  transform: translate(5px, -5px);
}

3. 旋转变换（Rotate）

语法：

css 复制代码

transform: rotate(45deg);   /* 顺时针旋转 45 度 */
transform: rotate(-30deg);  /* 逆时针旋转 30 度 */

使用场景：

图标旋转效果
卡片翻转效果
加载动画中的旋转效果

css 复制代码

/* 悬停时旋转 180 度 */
.icon:hover {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

4. 缩放变换（Scale）

语法：

css 复制代码

transform: scaleX(1.2);     /* X 轴放大 1.2 倍 */
transform: scaleY(0.8);     /* Y 轴缩小到 0.8 倍 */
transform: scale(1.5);      /* 等比例放大 1.5 倍 */
transform: scale(1.2, 0.9); /* X 轴放大 1.2 倍，Y 轴缩小到 0.9 倍 */

使用场景：

悬停时放大效果
焦点突出显示
图片预览放大

css 复制代码

/* 悬停时放大效果 */
.card:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

5. 倾斜变换（Skew）

语法：

css 复制代码

transform: skewX(10deg);        /* 沿 X 轴倾斜 10 度 */
transform: skewY(5deg);         /* 沿 Y 轴倾斜 5 度 */
transform: skew(10deg, 5deg);   /* 沿 X 轴倾斜 10 度，沿 Y 轴倾斜 5 度 */

使用场景：

斜切导航栏设计
动态图表效果
特殊形状设计

css 复制代码

/* 斜切效果 */
.skewed-box {
  transform: skewX(-10deg);
}

6. 复合写法

可以将多个变换函数组合使用，按顺序依次执行。

css 复制代码

/* 先平移，再旋转，最后缩放 */
transform: translate(10px, 20px) rotate(45deg) scale(1.5);

/* 先缩放，再旋转 */
transform: scale(1.2) rotate(180deg);

css 复制代码

/* 综合示例：悬停时向右上方移动并放大旋转 */
.box:hover {
  transform: translate(10px, -10px) rotate(5deg) scale(1.1);
  transition: transform 0.3s ease;
}

二、3D 变换

1. 透视（Perspective）

透视用于创建 3D 效果，决定了观察者与元素之间的距离。透视值越小，透视效果越强。

语法：

css 复制代码

/* 应用于父容器 */
.parent {
  perspective: 1000px;  /* 透视距离为 1000px */
}

使用场景：

创建 3D 旋转效果
实现立体卡片翻转
3D 导航菜单

css 复制代码

/* 3D 容器 */
.scene {
  perspective: 600px;
}

.card {
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;  /* 保持 3D 空间 */
}

2. 3D 旋转

3D 旋转可以绕 X、Y、Z 轴进行旋转。

语法：

css 复制代码

transform: rotateX(45deg);  /* 绕 X 轴旋转 45 度 */
transform: rotateY(45deg);  /* 绕 Y 轴旋转 45 度 */
transform: rotateZ(45deg);  /* 绕 Z 轴旋转 45 度 */

使用场景：

3D 卡片翻转效果
3D 旋转展示
立体图标效果

css 复制代码

/* 3D 卡片翻转 */
.card {
  transform: rotateY(180deg);
}

3. 3D 平移

3D 平移可以沿 X、Y、Z 轴进行移动。

语法：

css 复制代码

transform: translateX(50px);  /* 沿 X 轴平移 */
transform: translateY(50px);  /* 沿 Y 轴平移 */
transform: translateZ(50px);  /* 沿 Z 轴平移（需要透视效果） */
transform: translate3d(50px, 50px, 50px);  /* 3D 平移 */

使用场景：

3D 空间中的位置调整
配合透视创建深度感
3D 动画效果

css 复制代码

/* 3D 空间中的立方体 */
.cube-face {
  transform: translateZ(100px);
}

4. transform-style

transform-style 属性用于指定子元素是否保持 3D 变换。

css 复制代码

.parent {
  transform-style: preserve-3d;  /* 子元素保持 3D 空间 */
  transform-style: flat;         /* 子元素扁平化（默认） */
}

5. backface-visibility

backface-visibility 属性用于控制元素背面是否可见。

css 复制代码

.card {
  backface-visibility: hidden;  /* 背面不可见 */
  backface-visibility: visible; /* 背面可见（默认） */
}

三、案例展示

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .big {
      position: relative;
      perspective: 1000px;
      transform-style: preserve-3d;
      perspective: 1000px;
      width: 200px;
      height: 400px;
    }

    .front {
      position: absolute;
      text-align: center;
      line-height: 400px;
      width: 200px;
      height: 400px;
      background-color: aqua;
      z-index: 1;
      color: aliceblue;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      transition: all .6s;
    }

    h3 {
      transform: translateZ(50px);
      font-size: 20px;
      color: brown;
    }

    .back {
      position: absolute;
      color: aliceblue;
      text-align: center;
      line-height: 400px;
      width: 200px;
      height: 400px;
      background-color: bisque;
      transform-style: preserve-3d;
      transform: rotateY(180deg);
      transition: all .6s;
      backface-visibility: hidden;
    }

    .big:hover .front {
      transform: rotateY(-180deg);
    }

    .big:hover .back {
      transform: rotateY(0deg);
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="front">
      <h3>前面</h3>
    </div>
    <div class="back">
      <h3>背面</h3>
    </div>
  </div>
</body>

</html>