如何在rotateZ动画上更改轴？

Question

我有这个简单的HTML代码：

  <div class='d'>
     <span>  1234567890 </span>
    <input type='button' class='b'/>
  </div>

单击按钮时，我将应用此样式：

.dropped span
{
 transform: translateZ(200px )  rotatez(120deg);
 color:red;
 transition: all 1.3s ease-in;
}

通过

$(".b").on('click',function (){
    $(".d").addClass('dropped')
})

所以结果如下：

问题

我不希望它在6数字上旋转。

我希望它在1数字上旋转。

我该怎么做？

JSBIN

Answer 1

您需要将transform-origin指定为0 50%; 请注意，转换正常don't apply on inline elements，例如<span>，因此我将其显示属性更改为inline-block;：

$(".b").on('click', function() {
  $(".d").addClass('dropped')
})

.d {
  font-family: 'Orbitron', sans-serif;
  /* font style. Default uses Google fonts */
  text-shadow: 2px 2px #B4EAF3, 3px 3px #B4EAF3, 4px 4px #B4EAF3, 5px 5px #B4EAF3, 6px 6px #B4EAF3;
  font-size: 4vw;
  color: #207688;
  letter-spacing: 15px;
  font-weight: 800;
  position: relative;
}
.d span {
  display: inline-block;
  transform-origin: 0 50%;
}
.dropped span {
  transform: rotate(120deg);
  color: red;
  transition: all 1.3s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='d'>
  <span>  1234567890 </span>
  <input type='button' class='b' />
</div>

有关MDN

上transform-origin媒体资源的更多信息