阻止孩子繼承translateZ屬性

Question

我正在嘗試使用css3創建3D立方體效果。當我在父div上使用translateZ時，我正在使用translateZ屬性創建3D多維數據集環境，子div會自動繼承屬性。我試圖使用變換：無，並試圖給負轉換，但沒用。下面是一個例子fiddle

HTML

<div class="box-big"> 
    <div class="box"> 
     <h1>ABCD</h1> 
    </div> 
</div> 

CSS

body{ 
    perspective: 1000px; 
} 
.box-big{ 
    transform-style: perserve-3D; 
} 
.box{ 
    width: 300px; 
    height: 300px; 
    background: #FF0000; 
    transform: translateZ(400px); 
} 
h1{ 
    font-color: white; 
    line-height: 300px; 
    text-align: center; 
    transform: translateZ(-400px); 
} 

Answer 1

母公司所有的孩子們將根據父被渲染，讓你在問什麼不可能。您必須將其重新轉換爲您想要的內容，或者您​​最好的選擇是使用某種「分層」技術（例如位置：絕對或負邊距），以便h1可以位於.box元素之外，但仍然出現在.box元素的「頂部」。

這裏有一個工作示例：

修改HTML：

<div class="wrapper"> 
    <div class="box-big"> 
     <div class="box"> 
     </div> 
    </div> 
    <h1>ABCD</h1> 
</div> 

修改CSS：

body{ 
    perspective: 1000px; 
} 

.wrapper { 
    position: relative; 
} 

.box-big { 
    transform-style: preserve-3D; 
} 
.box{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 200px; 
    background: #FF0000; 
    transform: translateZ(300px); 
    z-index: 1; 
} 

h1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    color: white; 
    line-height: 200px; 
    text-align: center; 
    z-index: 255555; 
} 

https://jsfiddle.net/kcobbvcL/4/

作爲一個側面說明，你的小提琴CSS有一些拼寫錯誤。一定要使用一個好的IDE或瀏覽器工具來觀察非法/無效的CSS。

Answer 2

每個立方體都有6個邊，所以你應該使用6個div。當我們要移動整個魔方時，我們應該在一個div（div＃cube）中包含這6個div。

首先，您應該使用css創建立方體，如下例所示，然後使用div＃cube中的轉換來轉換或旋轉立方體。

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    perspective: 1000px; 
 
} 
 

 
#cube { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
} 
 

 
#cube figure { 
 
    width: 196px; 
 
    height: 196px; 
 
    display: block; 
 
    position: absolute; 
 
    border: 2px solid black; 
 
} 
 
#cube .front { transform: rotateY( 0deg) translateZ(100px); } 
 
#cube .back { transform: rotateX(180deg) translateZ(100px); } 
 
#cube .right { transform: rotateY( 90deg) translateZ(100px); } 
 
#cube .left { transform: rotateY(-90deg) translateZ(100px); } 
 
#cube .top { transform: rotateX( 90deg) translateZ(100px); } 
 
#cube .bottom { transform: rotateX(-90deg) translateZ(100px); } 
 

 
#cube{ 
 
transition: all 1s; 
 
} 
 
#cube:hover{ 
 
transform: rotateY(-20deg); 
 
/*transform: translateZ(-100px);*/ 
 
}

<section class="container"> 
 
    <div id="cube"> 
 
    <figure class="front">1</figure> 
 
    <figure class="back">2</figure> 
 
    <figure class="right">3</figure> 
 
    <figure class="left">4</figure> 
 
    <figure class="top">5</figure> 
 
    <figure class="bottom">6</figure> 
 
    </div> 
 
</section>