scale3d（）函数到底做了什么？

Question

scale3d（sx，sy，sz）

我无法理解当我改变（sz）值时scale3d（）真正做了什么

在下面的代码中，您可以看到（sz）的值= 1

＆＃13;

＆＃13;

body{perspective:600px}
div{
    width: 300px;
    height: 300px;
    background-color: burlywood;
    margin: auto;
    border-radius:40px;
    transition: all 5s ease-in-out;
    transform: scale3d(1,1,1)
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

在下面的代码中，您可以看到（sz）的值= 0.5

但没有改变相同的结果

＆＃13;

＆＃13;

body{perspective:600px}
div{
    width: 300px;
    height: 300px;
    background-color: burlywood;
    margin: auto;
    border-radius:40px;
    transition: all 5s ease-in-out;
    transform: scale3d(1,1,0.5)
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

注意：我尝试了所有解决方案＆amp;价值但没有发生

Answer 1

scale3d中的第三个数字是z轴，仅适用于三维形状。

你的例子有透视，但它们仍然只是使用二维形状，所以没有任何反应。

您可以使用真正的多维数据集查看效果：

scale3d（1,1,1）

#wrapper {
  perspective: 1200px;
  width: 200px;
  height: 200px;
  margin: 80px auto;
}
#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1, 1,1);
  transition: transform 1s;
}
#cube>div {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
}
#cube>div span {
  margin: auto;
  font-size: 50px;
}
#left {
  background-color: rgba(25, 25, 112, 0.7);
  transform: rotateY(-90deg) translateZ(100px);
}
#right {
  background-color: rgba(47, 79, 79, 0.7);
  transform: rotateY(90deg) translateZ(100px);
}
#front {
  background-color: rgba(119, 136, 153, 0.7);
  transform: rotateY(0deg) translateZ(100px);
}
#back {
  background-color: rgba(72, 61, 139, 0.7);
  transform: rotateX(180deg) translateZ(100px);
}
#top {
  background-color: rgba(0, 128, 128, 0.7);
  transform: rotateX(90deg) translateZ(100px);
}
#bottom {
  background-color: rgba(70, 130, 180, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}

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

scale3d（1,1,0.5）

#wrapper {
  perspective: 1200px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}
#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg) scale3d(1,1,0.5);
  transition: transform 1s;
}
#cube > div {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
}
#cube > div span {
  margin: auto;
  font-size: 50px;
}
#left {
  background-color: rgba(25,25,112,0.7);
  transform: rotateY(-90deg) translateZ(100px);
}
#right {
  background-color: rgba(47,79,79,0.7);
  transform: rotateY(90deg) translateZ(100px);
}
#front  {
  background-color: rgba(119,136,153,0.7);
  transform: rotateY(0deg) translateZ(100px);
}
#back {
  background-color: rgba(72,61,139,0.7);
  transform: rotateX(180deg) translateZ(100px);
}
#top {
  background-color: rgba(0,128,128,0.7);
  transform: rotateX(90deg) translateZ(100px);
}
#bottom {
  background-color: rgba(70,130,180,0.7);
  transform: rotateX(-90deg) translateZ(100px);
}

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

Answer 2

什么是Scale3d？

（示例结束，见链接）

您的第一个代码：

transform: scale3d(1,1,1)

您的第二个代码：

transform: scale3d(1,1,0.5)

这是：

scale3d ( <scaling-value-x> , <scaling-value-y> , <scaling-value-z> )

你的例子是2d形状，没有效果，这就是原因。 Z窗格用于制作3d对象。

  

Try Here，看看它是如何运作的。