我正在尝试使用 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)';
}
最佳答案
这完全是在摸黑，但正如这些问题的常见情况一样，您可能没有此 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 添加这些样式时，还需要考虑一件事。
页面呈现的操作顺序:
super 简化的页面渲染操作顺序:
<head>中的脚本跑- DOM 加载
- 附加在
<body>末尾的脚本跑 - 应用 CSS
- 后期绑定(bind)脚本操作
添加setTimeout (即使时间为 0)将您的 JS 调用从第 1 步弹出到第 5 步，这就是 fiddle 起作用的原因。
关于html - 我可以在图像上设置 rotateY() 动画吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28907925/