修改：A working fiddle

Question

我试图用css过渡来旋转图像。我有transition: 2s transform linear;和transform: rotateY(720deg);。

您可以在此JSFiddle中看到尝试。

CSS

h1 {
  font-size: 0px;
  transition: 10s font-size;
  transition: 2000s transform linear;
}
div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

HTML

<body background>
  <div><img id="text" src="http://raritea.com/raritea/images/logo.ico"/></div>
</body>

JS

var init = function(){
   document.getElementById('text').style.transform = 'rotateY(360000deg)';
}

Answer 1

这是一个彻头彻尾的黑暗，但正如这些问题的情况一样，可能是你没有初始状态，这个transition可以工作。

将此类内容添加到您未转换的状态：

.my-non-transitioned-state {
  transform: rotateY(0deg);
  transition: transform 2s linear;
}
.my-transitioned-state {
  transform: rotateY(270deg);
}

它应该有效。 transition是一个数学计算的标记，需要两个数值才能工作。因此，如果你只给它一个状态，它就不能转换。或者，如果你给它一个非数字状态（例如background-size: cover），它将无效。

确保您的transition同时具有初始和目标状态，这应该可以。

修改：A working fiddle

因此，当您通过JavaScript添加这些样式时，还有一件事需要考虑。

页面呈现的操作顺序：

页面呈现的超简化操作顺序：

<head>运行
DOM已加载
在<body>运行
CSS已应用
后期绑定脚本操作

添加setTimeout（即使时间为0）会弹出从第1步到第5步的JS调用，这就是小提琴的工作原理。

我可以在图像上为rotateY（）设置动画吗？

1 个答案:

修改：A working fiddle