Question

我正在尝试使用css3创建一个3d立方体效果。当我在父div上使用translateZ时，我使用translateZ属性来创建3d立方体环境，子div自动继承该属性。我试图使用 transform：none 并试图给出负变换但没有用。以下是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

父母的所有孩子都将根据父母的身份进行渲染，所以你所要求的是不可能的。你必须将它重新转换成你想要的，或者你最好的选择是使用一些＆＃34;分层＆＃34;技术（例如位置：绝对或负边距），以便h1可以在.box元素之外，但仍然出现在顶部＆＃34; .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/

作为旁注，你的小提琴有一些拼写错误。请务必使用好的IDE或浏览器工具来监视非法/无效的CSS。

Answer 2

每个立方体有6个边，所以你应该使用6个div。当我们想要移动整个立方体时，我们应该将这6个div包含在一个div中（div＃cube）。

首先，您应该使用css创建多维数据集，如下例所示，然后使用div＃cube中的transform来翻译或旋转多维数据集。

＆＃13;

   .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 );*/
}

＆＃13;

<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>

＆＃13;

防止孩子继承translateZ属性

2 个答案: