阻止孩子继承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>