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](http://jsfiddle.net/kcobbvcL/2/) 

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

```