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 doest有一个初始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>