gpt4 book ai didi

html - 我可以在图像上设置 rotateY() 动画吗?

转载 作者:太空宇宙 更新时间:2023-11-03 21:31:54 25 4
gpt4 key购买 nike

我正在尝试使用 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 简化的页面渲染操作顺序:

  1. <head> 中的脚本跑
  2. DOM 加载
  3. 附加在 <body> 末尾的脚本跑
  4. 应用 CSS
  5. 后期绑定(bind)脚本操作

添加setTimeout (即使时间为 0)将您的 JS 调用从第 1 步弹出到第 5 步,这就是 fiddle 起作用的原因。

关于html - 我可以在图像上设置 rotateY() 动画吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28907925/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com