如何更改我的 rotateZ 动画的轴心？答案

【问题标题】：How can I change the pivot on my rotateZ animation?如何更改我的 rotateZ 动画的轴心？
【发布时间】：2015-08-08 00:15:45
【问题描述】：

我有这个简单的 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

【问题讨论】：

Set rotation point in CSS3?的可能重复

标签： javascript jquery css css-transitions css-transforms

【解决方案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>

更多关于transform-origin属性的信息MDN

【讨论】：

那么在没有 inline-block 的情况下，旋转如何工作？
@RoyiNamir 我已经遇到过这个问题，一些浏览器仍然对不符合网络标准的内联元素应用转换。但是在我的浏览器中，当元素内联时，变换原点不起作用。