Question

在使用transform: translate3d()时，我偶然发现了一个非常奇怪的行为。只要我仅使用translate3d()属性，所有内容都将与translate()完全一样。但是，如果我将此与scale3d()结合使用，行为就会改变。

请参阅附件中的示例，以了解发生了什么情况。

为什么结果不同？有人知道吗？

.wrapper {
  margin-top:10px;
  display:flex;
  width: 650px;
  justify-content: space-between;
  box-shadow: 0px -30px 0px black inset; 

}

.translate,
.translate3d,
.translatey {
  width: 30%;
  height: 100px;
  font-size: 24pt;
}

.translate {
  will-change: transform, scale;
  transform: scale(0.75) translate(0px, -22.5px);
  background-color:lightcoral;  
}

.translate3d {
  transform: translate3d(0, -22.5px, 0) scale3d(0.75, 0.75, 0.75);
  background-color:lightblue;  
}

.translatey {
  transform: scale(0.75) translateY(-22.5px);
  background-color:springgreen;  
}

<div class="wrapper">
  <div class="translate">
    translate
  </div>
  <div class="translate3d">
    translate3d
  </div>
  <div class="translatey">
    translatey
  </div>
</div>

scale3d + translate3d与scale + translate

0 个答案: