Question

是否可以使用scaleZ()来有效创建3D盒子？

这是我尝试过的，但显然它根本没有缩放：

.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;
}

还有其他方法可以解决这个问题吗？即使我必须使用Javascript？

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

Answer 1

ScaleZ（）不会“挤出”，它会要求元素具有它们不具有的厚度。

ScaleZ的特殊之处在于，在大多数情况下，它不会产生任何可见效果（如在您的示例中），并且需要其他3d变换可见，例如：

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

有关此背后计算的说明，请参阅What does the scaleZ() CSS transform function do?。

使用CSS制作3d立方体的常用方法是使用6个表面并将它们转换为立方体的6个平面，您可以这样做：

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

Answer 2

我发现Z轴的缩放值是多个，Z轴的值是translate。因此，您还必须应用 translateZ 才能应用 scaleZ 。

transform: scaleZ(10) translateZ(1px);

请参阅小提琴http://jsfiddle.net/jakethashi/ey8j5345/

用scaleZ挤压效果

2 个答案: