Extrude effect with scaleZ

Question

Is it possible to use scaleZ() to effectively create a 3D box?

Here's what I've tried, but obviously it didn't scaleZ at all:

.box {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: scaleZ(10);
  -moz-transform: scaleZ(10);
  -ms-transform: scaleZ(10);
  -o-transform: scaleZ(10);
  transform: scaleZ(10);
  width: 100px;
  height: 100px;
  display: block;
  background:red;
}

Is there another way I can tackle this? Even if I have to use Javascript?

DEMO: http://jsfiddle.net/3r1gus9f/

Answer 1

ScaleZ() doesn't "extrude", it would required elements to have a thickness which they don't.

ScaleZ is particular in the way that in most cases it won't have any visible effect (as in your example) and requires other 3d transforms to be visible, example :

.w{
  display:inline-block;
  perspective:500px;
  border:1px solid red;
}
.b{
  width:150px;
  height:150px;
  transform-origin:0 0;
  transform: rotatey(45deg);
  background:pink;
}
.b2{
  transform: scaleZ(10) rotatey(45deg);
}

<div class="w">
  no scaleZ()
  <div class="b"></div>
</div>
<div class="w">
  scaleZ(10)
  <div class="b b2"></div>
</div>

For an explanation of the calculations behind this, see What does the scaleZ() CSS transform function do?.

---

A common way to make a 3d cube with CSS is to use 6 surfaces and to transform them into the 6 planes of a cube, you could do this :

#cube {
  position: relative;
  width: 200px; height:200px;
  margin: 100px auto;
  perspective: 500px;
  perspective-origin: 50% 10%;
}
#cube div {
  font-size: 2rem;
  position: absolute;
  width: 200px; height: 200px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #000;
}
.back {
  transform: translateZ(-100px) rotateY(180deg);
}
.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}
.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}
.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}
.front {
  transform: translateZ(100px);
}

<div id="cube">
  <div class="front">front</div>
  <div class="back">back</div>
  <div class="top">top</div>
  <div class="bottom">bottom</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>