dagda1 dagda1 - 1 year ago 45
CSS Question

transformZ not working

Here is a jsbin of what I have so far.

I don't understand why tranformZ is not working. Here is my html:

<div class="pyramid-container">
<div id="pyramid">
<div>child div of #pyramid</div>

And below is my css, I have perspective set and transform-style set to preserve-3d so I am not suer what is wrong.

.pyramid-container {
perspective: 800px;

#pyramid {
position: relative;
height: 200px;
width: 100px;
transform-style: preserve-3d;
transform-origin: 116px 200px 116px;

#pyramid div {
position: absolute;
width: 0;
height: 0;
border-left: 200px solid transparent; /* left arrow slant */
border-right: 200px solid transparent; /* right arrow slant */
border-bottom: 200px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
opacity: .5;

#pyramid div:nth-child(1) {
transform: translateZ(80em);


Your font-size is set to zero, so transforming the element 80em equals 0px. Use another unit for the transform or increase your font size.