試一試
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 |
瀏覽器相容性
載入中…