试一试
transform: translateZ(0);
transform: translateZ(42px);
transform: translateZ(-9.7rem);
transform: translateZ(-3ch);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
此变换由一个 <length> 定义，该值指定元素或元素组向内或向外移动的距离。
在上述交互式示例中，立方体上设置了 perspective: 550px;（用于创建 3D 空间）和 transform-style: preserve-3d;（以便子元素，即立方体的 6 个面，也定位在 3D 空间中）。
注意： translateZ(tz) 等效于 translate3d(0, 0, tz)。
语法
css
translateZ(tz)
值
正式语法
<translateZ()> =
translateZ( <length> )
示例
在此示例中，创建了两个盒子。一个在页面上正常定位，完全没有平移。另一个通过应用透视来创建 3D 空间，然后向用户移动。
HTML
html
<div>Static</div>
<div class="moved">Moved</div>
CSS
css
div {
position: relative;
width: 60px;
height: 60px;
left: 100px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translateZ(200px);
background-color: pink;
}
这里真正重要的是“moved”类；让我们看看它做了什么。首先，perspective() 函数定位观察者相对于 z=0 的平面（本质上是屏幕表面）。500px 的值意味着用户在 z=0 处图像的“前面”500 像素。
然后，translateZ() 函数将元素从屏幕“向外”移动 200 像素，朝向用户。这使得元素在 2D 显示器上看起来更大，或者在使用 VR 头戴设备或其他 3D 显示设备时看起来更近。
请注意，如果 perspective() 值小于 translateZ() 值，例如 transform: perspective(200px) translateZ(300px);，则变换后的元素将不可见，因为它超出了用户的视口。透视值和 translateZ 值之间的差异越小，用户离元素越近，变换后的元素看起来就越大。
注意： 由于变换的组合不是可交换的，因此您编写不同函数的顺序很重要。特别是，通常情况下，您希望 perspective() 放置在 translateZ() 之前。
结果
规范
| 规范 |
|---|
| CSS 变换模块级别 2 # funcdef-translatez |
浏览器兼容性
加载中…