javascript - 如何更改 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%; 。
请注意，转换 normaly 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 属性的更多信息