使用 scaleZ 的拉伸效果答案

【问题标题】：Extrude effect with scaleZ使用 scaleZ 的拉伸效果
【发布时间】：2015-05-13 19:21:53
【问题描述】：

是否可以使用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？

演示：http://jsfiddle.net/3r1gus9f/

【问题讨论】：

标签： css transform css-shapes

【解决方案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>

【讨论】：

【解决方案2】：

我发现 Z 轴的缩放值是 Z 轴平移值的倍数。因此，您还必须应用 translateZ 才能应用 scaleZ。

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

见小提琴http://jsfiddle.net/jakethashi/ey8j5345/

【讨论】：

这不起作用