CSS3 空间转换（Transform）

空间转换主要通过 transform 属性实现，比平面转换多一Z轴，允许对元素进行旋转、缩放、倾斜或平移。常用函数包括：

• 平移（Translate）
  transform: translateX(50px) translateY(30px);
  或简写为 transform: translate(50px, 30px);。支持 3D 平移（translateZ）。

• 旋转（Rotate）
  transform: rotate(45deg); 以元素中心为原点旋转。
  3D 旋转支持 rotateX(), rotateY(), rotateZ()。

• 缩放（Scale）
  transform: scale(1.5); 等比例放大 1.5 倍。
  可单独设置 scaleX() 或 scaleY()。

• 倾斜（Skew）
  transform: skew(30deg, 10deg); 沿 X 和 Y 轴倾斜。

• 3D 转换
  需设置父容器透视效果：
  perspective: 1000px;
  子元素使用 transform-style: preserve-3d; 保持 3D 空间。

CSS3 动画（Animation）

动画的常用属性

关键帧动画属性

• animation-name: 指定动画名称，与 @keyframes 规则匹配
• animation-duration: 定义动画完成一个周期的时间（如 2s）
• animation-timing-function: 控制动画速度曲线（ease/linear/cubic-bezier()）
• animation-delay: 设置动画开始前的延迟时间
• animation-iteration-count: 定义播放次数（infinite 表示无限循环）

过渡动画属性

• transition-property: 指定应用过渡的CSS属性（如 all/opacity）
• transition-duration: 过渡效果的持续时间
• transition-timing-function: 速度曲线（类似动画的 timing-function）
• transition-delay: 过渡效果开始前的延迟

变形属性

• transform: 实现旋转/缩放/移动等效果
  • rotate(45deg): 旋转45度
  • scale(1.2): 缩放至1.2倍
  • translateX(100px): 水平移动100像素
• transform-origin: 定义变形的基准点（如 center top）

基础控制属性

• opacity: 控制元素透明度（0-1范围）
• visibility: 控制元素显示/隐藏（保留布局空间）
• z-index: 控制层叠顺序

SVG动画属性

• stroke-dasharray: 创建路径描边动画
• fill-opacity: 控制填充透明度
• path: 定义运动路径（配合 animateMotion 使用）

性能优化属性

• will-change: 提前声明可能变化的属性（如 transform）
• backface-visibility: 控制3D翻转时的背面可见性

JavaScript控制属性

• animation-play-state: 暂停/运行动画（paused/running）
• currentTime: 获取或设置动画当前时间点（Web Animations API）

代码示例：

.box {
  animation: fadeIn 2s ease-in-out 0.5s forwards;
  transform: translateY(20px) scale(1.1);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

案例2：3D导航

 .nav{
            width: 300px;
            height: 40px;
            margin: 100px auto;
        }

        .nav ul{
            display: flex;
        }
        .nav li{
            position: relative;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all 0.5s;

            transform-style: preserve-3d;

            /* 为了方便看效果 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }
        .nav li a{
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        /* 立方体每个面独立，互不影响 */
        .nav li a:first-child{
            background-color: green;
            transform: translateZ(20px);
        }
        .nav li a:last-child{
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px);

        }
        .nav li:hover{
            transform: rotateX(-90deg);
        }

结合转换与动画

将 transform 与动画结合可实现动态效果：

@keyframes moveAndRotate {
  0% { transform: translateX(0) rotate(0); }
  100% { transform: translateX(200px) rotate(360deg); }
}
.box {
  animation: moveAndRotate 3s linear infinite;
}

性能优化建议

• 优先使用 transform 和 opacity，这些属性不会触发重排（reflow）。
• 避免频繁修改 width、height 或 top/left。
• 使用 will-change: transform; 提示浏览器优化。