CSS 3D变换，transform:translateZ()

lb2917

于 2025-04-01 17:11:18 发布

阅读量327

点赞数 3

文章标签： css 3d 前端

本文链接：https://blog.youkuaiyun.com/lb2917/article/details/146916894

版权

transform:translateZ()是CSS 3D变换中的一个属性，用于控制元素在Z轴（前后方向）上的移动

功能：将元素沿Z轴（垂直于屏幕的方向）移动指定距离

translateZ(10px）=》元素向观察者方向凸起（靠近你）

translateZ(-50px)=》元素向屏幕内部凹陷（远离你）

视觉效果：

当元素在Z轴上移动时，会因透视（perspective）产生近大远小的立体效果

需要父元素或祖先元素设置perspective属性才能看到3D效果，否则无变化

关键点说明：

perspective的必要性：

父容器必须设置透视（如：perspective:500px）,否则translateZ()的3D效果无法显现

perspective的值越小，3D效果越夸张（类似于广角镜头）；值越大，效果越平缓

！注意，多次使用3D效果，会加重GPU性能

下面见代码：（实现类似的还可以直接使用transform: scale(1.1); /* 鼠标悬停时放大 */一样可以实现类似的效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="margin-left: 100px;margin-top: 100px;">
        <img src="./left.png">
    </div>
</body>
<style>
    body{
        perspective: 500px; /* 必须设置透视距离 */
    }
    div{
        height: 400px;
        width: 200px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* 初始阴影 */
        cursor: pointer;
        transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
    }
    div:hover{
            box-shadow: 0 8px 20px rgba(0, 0, 0, 1); /* 鼠标悬停时的阴影 */
            transform: translateZ(10px); /* 在 Z 轴上凸起 */
    }
</style>
</html>