CSS Transform & Transition

🎬

CSS 动画总览

新手必看！详细介绍 Transition 和 Animation 的区别、语法和使用场景

📍

坐标系统

理解 CSS 中的 X、Y、Z 轴和坐标原点

↔️

translate()

在 X 和 Y 轴上同时移动元素

→

translateX()

只在水平方向移动元素

↓

translateY()

只在垂直方向移动元素

⬆️

translateZ()

在 Z 轴上移动元素（3D）

🔄

rotate()

围绕元素中心点旋转

⤴️

rotateX()

围绕 X 轴旋转（3D）

⤵️

rotateY()

围绕 Y 轴旋转（3D）

🔄

rotateZ()

围绕 Z 轴旋转（等同于 rotate）

🔍

scale()

改变元素的大小

↔️

scaleX()

只在水平方向缩放

↕️

scaleY()

只在垂直方向缩放

📏

scaleZ()

在 Z 轴上缩放（3D 深度）

📐

skew()

在 X 和 Y 轴倾斜元素

⤢

skewX()

在 X 轴倾斜元素

⤡

skewY()

在 Y 轴倾斜元素

✨

组合变换

同时应用多个 transform 函数

⏰

transition-duration

控制过渡持续时间

📈

transition-timing-function

控制过渡速度曲线

⏳

transition-delay

控制过渡延迟时间

🎞️

@keyframes

创建复杂的关键帧动画

⏯️

animation-play-state

控制动画的播放和暂停

🎯

animation-fill-mode

控制动画结束后的状态

👁️

perspective

为 3D 变换添加景深效果

🌀

rotate3d()

围绕自定义 3D 轴旋转

📦

translate3d()

在 X、Y、Z 三个轴上移动

🎭

transform-style

控制子元素的 3D 空间渲染

🔙

backface-visibility

控制元素背面是否可见

👀

perspective-origin

控制 3D 透视的视角位置

🎯

transform-origin

设置变换的原点位置

⚡

will-change

性能优化 - 提前告知浏览器

🎯

侧边栏滑入滑出

响应式导航菜单的经典实现

🔄

卡片翻转

3D 翻转效果的完整实现

🖼️

轮播图

图片轮播组件与切换动画

⚡

加载动画

多种加载指示器样式

📚

查看全部应用场景

探索真实案例 →