CSS 2D 效果、3D 效果与 Animation 总结

CSS 中的动画与视觉效果主要分为：

2D Transform（二维变换）
3D Transform（三维变换）
Transition（过渡动画）
Animation（关键帧动画）

它们经常配合使用。

一、2D 效果（transform）

2D 变换是在二维平面中移动、旋转、缩放元素。

核心属性：

css 复制代码

transform:

1. translate() 位移

控制元素移动。

css 复制代码

transform: translate(100px, 50px);

意思：

X轴移动100px
Y轴移动50px

单独写法

css 复制代码

transform: translateX(100px);
transform: translateY(50px);

示例

html 复制代码

<div class="box"></div>

css 复制代码

.box{
    width:100px;
    height:100px;
    background:red;

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

2. rotate() 旋转

单位：

css 复制代码

deg

例子：

css 复制代码

transform: rotate(45deg);

顺时针旋转45度。

示例

css 复制代码

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

3. scale() 缩放

css 复制代码

transform: scale(2);

表示：

放大2倍

分别控制

css 复制代码

transform: scaleX(2);
transform: scaleY(0.5);

4. skew() 倾斜

css 复制代码

transform: skew(30deg);

元素会倾斜。

5. transform-origin

设置变换中心点。

默认：

css 复制代码

center center

例如：

css 复制代码

transform-origin: left top;

6. 多个变换一起写

css 复制代码

transform: translateX(100px) rotate(45deg) scale(1.5);

执行顺序：

从右往左。

二、Transition（过渡动画）

transition 用于：

"状态变化时的平滑动画"

例如：

hover
focus
active
宽高变化
颜色变化

基本语法

css 复制代码

transition: 属性 时间 速度曲线 延迟;

示例

css 复制代码

.box{
    width:100px;
    height:100px;
    background:red;

    transition: all 1s;
}

.box:hover{
    width:200px;
    background:blue;
}

效果：

鼠标移入后：
- 宽度变大
- 颜色渐变

Transition（过渡动画）的常用属性

1. transition-property

指定动画属性。

css 复制代码

transition-property: width;

2. transition-duration

动画时间。

css 复制代码

transition-duration: 1s;

3. transition-timing-function

速度曲线。

linear

匀速。

css 复制代码

transition-timing-function: linear;

ease

默认，先快后慢。

css 复制代码

ease

ease-in

慢开始。

ease-out

慢结束。

ease-in-out

两头慢。

三、Animation（关键帧动画）

transition：

必须有"状态变化"

animation：

可以自动播放
更复杂
可循环

1. @keyframes

定义动画过程。

示例

css 复制代码

@keyframes move{
    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(300px);
    }
}

2. 使用动画

css 复制代码

.box{
    animation: move 2s;
}

意思：

move动画
播放2秒

完整例子

html 复制代码

<div class="box"></div>

css 复制代码

.box{
    width:100px;
    height:100px;
    background:red;

    animation: move 2s infinite;
}

@keyframes move{
    0%{
        transform: translateX(0);
    }

    50%{
        transform: translateX(300px);
    }

    100%{
        transform: translateX(0);
    }
}

animation 常用属性

1. animation-name

动画名称。

css 复制代码

animation-name: move;

2. animation-duration

动画时间。

css 复制代码

animation-duration: 2s;

3. animation-iteration-count

播放次数。

css 复制代码

animation-iteration-count: infinite;

无限循环。

4. animation-delay

延迟。

css 复制代码

animation-delay: 1s;

5. animation-direction

方向。

alternate

来回播放。

css 复制代码

animation-direction: alternate;

6. animation-fill-mode

控制结束状态。

forwards

停在最后一帧。

css 复制代码

animation-fill-mode: forwards;

四、3D 效果（transform 3D）

CSS 3D 的核心：

css 复制代码

transform

加上：

css 复制代码

perspective

1. perspective 景深

决定"离屏幕远近"。

css 复制代码

perspective: 1000px;

值越小：

立体感越强

2. rotateX()

绕X轴旋转。

css 复制代码

transform: rotateX(60deg);

3. rotateY()

绕Y轴旋转。

css 复制代码

transform: rotateY(60deg);

4. rotateZ()

其实就是普通2D旋转。

css 复制代码

transform: rotateZ(45deg);

5. translateZ()

Z轴移动。

css 复制代码

transform: translateZ(100px);

6. transform-style

preserve-3d

让子元素保持3D。

css 复制代码

transform-style: preserve-3d;

五、3D 示例（立方体基础）

html 复制代码

<div class="scene">
    <div class="cube">
        <div class="front"></div>
    </div>
</div>

css 复制代码

.scene{
    perspective:1000px;
}

.cube{
    width:200px;
    height:200px;

    transform-style: preserve-3d;

    transform: rotateY(45deg);
}

.front{
    width:200px;
    height:200px;
    background:red;

    transform: translateZ(100px);
}

六、常见组合效果

1. 卡片翻转

css 复制代码

.card:hover{
    transform: rotateY(180deg);
}

2. 图片放大

css 复制代码

img:hover{
    transform: scale(1.2);
}

3. 按钮弹起

css 复制代码

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

4. 无限旋转

css 复制代码

@keyframes spin{
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}

七、transition 和 animation 区别

对比	transition	animation
是否自动播放	❌	✅
是否需要触发	✅	❌
是否复杂	一般	很强
是否能循环	不方便	很方便
是否支持关键帧	❌	✅

八、重点知识总结

transform

用于：

位移
旋转
缩放
倾斜

transition

用于：

状态变化动画

例如：

css 复制代码

:hover

animation

用于：

自动动画
循环动画
复杂动画

核心：

css 复制代码

@keyframes

3D核心

必须记住：

css 复制代码

perspective
transform-style: preserve-3d

CSS 2D 效果、3D 效果 与 Animation 总结