CSS过渡-webkit-transform跳跃位置

Question

我有以下CSS：

.element{
  position:relative;
  transition:all 1s;
  -webkit-transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
}

.spun{
  .element{
    top:260px;
    -webkit-transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg);
  }
}

和HTML

<div class="element" id="element-1">
  <div class="graphic-wrap">
    Text 1
  </div>
</div>
<div class="element" id="element-2">
  <div class="graphic-wrap">
    Text 2
  </div>
</div>
<div class="element" id="element-3">
  <div class="graphic-wrap">
    Text 3
  </div>
</div>

当我在身体上添加一类spun ，所有东西都会跳跃，然后移动到适当位置。 您可以看到它实际上不在屏幕上，即使您比较它的开始位置和结束位置，它们的确非常相似：

演示： http ： //codepen.io/EightArmsHQ/pen/dadff4f8e9f63e9f825693865d1c9354

但是，如果我不添加spun类，而是逐渐增加开发人员工具中的值，它将逐渐移动我想要的样子。

如何防止一切都跳起来？

Answer 1

这是因为.element没有最初的top位置，因此没有从其转换的状态。

只需将.element起始位置即可。 例如：

 $('body').click(function(){ $(this).toggleClass('spun'); }) 

 .element { top: 0px; position: relative; transition: all 1s; transform: rotateX(1deg) rotateZ(1deg) rotateY(0deg); transform-style: preserve-3d; transform-origin: 50% 50%; } .spun .element { top: 260px; transform: rotateX(45deg) rotateZ(45deg) rotateY(0deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element" id="element-1"> <div class="graphic-wrap"> Text 1 </div> </div> <div class="element" id="element-2"> <div class="graphic-wrap"> Text 2 </div> </div> <div class="element" id="element-3"> <div class="graphic-wrap"> Text 3 </div> </div>