prevent children from inheriting translateZ property - html

Question

I am trying to create a 3d cube effect using css3. I am using translateZ property to create the 3d cube environment when I use translateZ on parent div the child div automatically inherits the property. I have tried to use transform: none and the tried to give negative transform but of no use. Here is an example 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

All the children of the parent are going to be rendered according to the parent, so what you are asking is not possible. You would have to re-transform it to what you want, or probably your best bet is to use some "layering" technique (such as position: absolute or negative margins) so that the h1 can be outside of the .box element, but still appear "on top" of the .box element.
Here's a working example:
Modified HTML:
<div class="wrapper">
<div class="box-big">
<div class="box">
</div>
</div>
<h1>ABCD</h1>
</div>
Modified 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/
As a side note, your fiddle css has some typos. Be sure to use a good IDE or a browser tool to watch for illegal / invalid css.

Answer 2

every cube has 6 sides, so u should use 6 div s. As we want to move the whole cube we should include those 6 div s in one div (div#cube).
first, you should create the cube using css, as the example below, then you translate or rotate the cube, using transform in 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>