CSS3 动画与变换 - translate3d() 函数

1. 什么是 translate3d() 函数？

translate3d() 函数是 CSS3 transform 属性的一个变换函数，用于在 3D 空间中平移元素。它允许你沿 X、Y 和 Z 轴平移元素，从而创建立体的视觉效果。通过 translate3d() 函数，你可以为网页添加更加生动和沉浸式的 3D 交互体验。

2. 语法

2.1 基本语法

transform: translate3d(tx, ty, tz);

2.2 简化语法

/* 仅沿 X 轴平移 */
transform: translateX(tx);

/* 仅沿 Y 轴平移 */
transform: translateY(ty);

/* 仅沿 Z 轴平移 */
transform: translateZ(tz);

2.3 参数说明

  • tx：沿 X 轴平移的距离
  • ty：沿 Y 轴平移的距离
  • tz：沿 Z 轴平移的距离

2.4 单位说明

  • 像素值：如 10px、-20px，表示固定距离的平移
  • 百分比：如 50%、-25%，基于元素自身的宽度（X 轴）、高度（Y 轴）或深度（Z 轴）计算
  • 其他长度单位：如 em、rem、vw、vh 等

2.5 3D 空间坐标系

在 CSS 3D 变换中，坐标系的定义如下：

  • X 轴：水平方向，向右为正
  • Y 轴：垂直方向，向下为正
  • Z 轴：深度方向，朝向观察者为正

3. 基础示例

示例 1：基本 3D 平移效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translate3d() 基本示例</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
            perspective: 1000px;
            /* 设置透视效果，使 3D 变换更加明显 */
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.5s ease;
        }
        
        .box:hover {
            /* 沿 X 轴平移 50px，沿 Y 轴平移 30px，沿 Z 轴平移 100px */
            transform: translate3d(50px, 30px, 100px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看 3D 平移效果</div>
    </div>
</body>
</html>

示例 2：Z 轴平移效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translate3d() Z 轴平移示例</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
            perspective: 1000px;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.5s ease;
        }
        
        .box:hover {
            /* 仅沿 Z 轴平移 150px */
            transform: translateZ(150px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看 Z 轴平移效果</div>
    </div>
</body>
</html>

示例 3：负值平移效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translate3d() 负值平移示例</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 2px solid #ddd;
            margin: 50px;
            position: relative;
            perspective: 1000px;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #2ecc71;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.5s ease;
        }
        
        .box:hover {
            /* 沿 X 轴负方向平移 50px，沿 Y 轴负方向平移 30px，沿 Z 轴负方向平移 50px */
            transform: translate3d(-50px, -30px, -50px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">悬停查看负值平移效果</div>
    </div>
</body>
</html>

4. 实际应用场景

场景 1：3D 卡片效果

使用 translate3d() 函数创建具有深度感的 3D 卡片效果。

.card-container {
    width: 300px;
    height: 200px;
    perspective: 1000px;
    margin: 50px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

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

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-front {
    background-color: #3498db;
    color: white;
}

.card-back {
    background-color: #e74c3c;
    color: white;
    transform: rotateY(180deg);
}

场景 2：3D 菜单效果

使用 translate3d() 函数创建具有深度感的 3D 菜单效果。

.menu {
    display: flex;
    gap: 20px;
    padding: 20px;
    perspective: 1000px;
}

.menu-item {
    width: 100px;
    height: 100px;
    background-color: #f39c12;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.menu-item:hover {
    transform: translate3d(0, -10px, 50px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

场景 3：3D 轮播效果

使用 translate3d() 函数创建 3D 轮播效果。

<div class="carousel-container">
    <div class="carousel" id="carousel">
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
        <div class="carousel-item">5</div>
    </div>
    <button onclick="prevItem()">上一个</button>
    <button onclick="nextItem()">下一个</button>
</div>

<style>
    .carousel-container {
        width: 400px;
        height: 300px;
        perspective: 1000px;
        margin: 50px;
        position: relative;
    }
    
    .carousel {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 1s ease;
    }
    
    .carousel-item {
        width: 200px;
        height: 150px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #3498db;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 24px;
    }
</style>

<script>
    let currentIndex = 0;
    const itemCount = 5;
    const itemWidth = 250;
    
    function updateCarousel() {
        const carousel = document.getElementById('carousel');
        const angle = (currentIndex * -360) / itemCount;
        carousel.style.transform = `rotateY(${angle}deg) translateZ(200px)`;
    }
    
    function nextItem() {
        currentIndex = (currentIndex + 1) % itemCount;
        updateCarousel();
    }
    
    function prevItem() {
        currentIndex = (currentIndex - 1 + itemCount) % itemCount;
        updateCarousel();
    }
    
    // 初始化轮播
    function initCarousel() {
        const items = document.querySelectorAll('.carousel-item');
        const angle = 360 / itemCount;
        
        items.forEach((item, index) => {
            const itemAngle = index * angle;
            item.style.transform = `rotateY(${itemAngle}deg) translateZ(200px)`;
        });
    }
    
    initCarousel();
</script>

场景 4：3D 按钮效果

使用 translate3d() 函数创建具有深度感的 3D 按钮效果。

.button-3d {
    padding: 12px 24px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform-style: preserve-3d;
}

.button-3d:hover {
    transform: translate3d(0, -2px, 10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.button-3d:active {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

场景 5：3D 滚动效果

使用 translate3d() 函数创建视差滚动效果。

.parallax-section {
    height: 500px;
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    transform: translate3d(0, 0, 0);
}

.parallax-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* JavaScript 实现滚动效果 */
/*
window.addEventListener('scroll', function() {
    const scrolled = window.pageYOffset;
    const parallax = document.querySelector('.parallax-bg');
    const speed = scrolled * 0.5;
    parallax.style.transform = `translate3d(0, ${speed}px, 0)`;
});
*/

5. 注意事项

  1. 浏览器兼容性：

    • 现代浏览器（Chrome、Firefox、Safari、Edge）都支持 translate3d() 函数
    • 对于旧版本浏览器，可能需要添加浏览器前缀（如 -webkit-、-moz-、-o-）

  2. 透视效果：

    • 要使 translate3d() 函数的效果更加明显，需要为父元素设置 perspective 属性
    • perspective 值越小，3D 效果越明显；值越大，3D 效果越接近 2D

  3. 性能考虑：

    • translate3d() 函数会触发 GPU 加速，性能通常比 2D 变换更好
    • 对于频繁的 3D 变换操作，建议使用 translate3d() 而不是其他方法

  4. Z 轴平移：

    • 沿 Z 轴的平移（translateZ()）会影响元素的视觉大小，距离观察者越近（正值），元素看起来越大；距离观察者越远（负值），元素看起来越小
    • 这是因为透视效果会产生近大远小的视觉错觉

  5. 与其他变换的组合：

    • translate3d() 可以与其他 3D 变换函数（如 rotate3d()、scale3d()）组合使用
    • 变换顺序会影响最终效果，建议将 translate3d() 放在其他 3D 变换之前

  6. 变换原点：

    • 默认的变换原点是元素的中心点（50% 50% 0）
    • 可以使用 transform-origin 属性修改变换原点，从而改变平移的参考点

  7. 硬件加速：

    • 使用 translate3d() 函数可以触发浏览器的硬件加速，提高动画性能
    • 即使只需要 2D 变换，有时也会使用 translate3d(tx, ty, 0) 来获得硬件加速的好处

6. 3D 变换的基本概念

6.1 3D 坐标系

在 CSS 3D 变换中，坐标系的定义如下：

  • X 轴：水平方向，向右为正
  • Y 轴：垂直方向，向下为正
  • Z 轴：深度方向，朝向观察者为正

6.2 透视投影

透视投影是 3D 变换的核心概念，它模拟了人眼观察物体的方式：

  • 近处的物体看起来更大
  • 远处的物体看起来更小
  • 平行线在远处会汇聚到一点

通过设置 perspective 属性，可以控制透视效果的强度。

6.3 变换样式

要在 3D 空间中正确显示子元素，需要为父元素设置 transform-style: preserve-3d，这样子元素就会继承父元素的 3D 空间。

7. 总结

translate3d() 函数是 CSS3 中实现 3D 空间平移的重要工具，它允许你：

  • 在 3D 空间中沿 X、Y 和 Z 轴平移元素
  • 创建具有深度感的立体视觉效果
  • 与其他 3D 变换函数组合创建复杂的 3D 效果
  • 触发 GPU 加速，提高动画性能
  • 实现各种沉浸式的 3D 交互体验

通过理解和掌握 translate3d() 函数，你可以创建更加生动、立体的网页界面，提升用户的交互体验。无论是 3D 卡片、3D 菜单还是 3D 轮播，translate3d() 函数都能帮助你实现这些效果。

« 上一篇 CSS3 动画与变换 - matrix() 函数 下一篇 » CSS3 rotate3d() 函数详解
↑