使用 scaleZ 挤出效果

Question

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

这是我尝试过的方法，但显然它根本没有 scaleZ：

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

Answer 1

我发现 Z 轴缩放值是 Z 轴平移值的倍数。所以你还必须应用 translateZ 才能应用 scaleZ.

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

参见 fiddle http://jsfiddle.net/jakethashi/ey8j5345/

Answer 2

ScaleZ() 没有 "extrude"，它要求元素具有它们没有的厚度。

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>

使用 scaleZ 挤出效果

Extrude effect with scaleZ

css

transform

css-shapes