gpt4 book ai didi

html - 时钟旋转 360 度不工作

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

假设我有一个时钟图像,我希望它在 css 的帮助下旋转 360 度。然而,即使我有 transform: rotate(360deg) 属性,我的时钟仍然没有旋转。

这是我的基本代码。

HTML

<div id="clock"></div>

CSS

#clock {
border-radius: 100px;
height: 79px;
width: 79px;
background: url('https://s3.postimg.io/3k6hhoafn/download.png');
}
#clock:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

我有一个 jsfiddle这显示了我的时钟应该是什么样子。

请解释为什么我的时钟不旋转并修复错误。

最佳答案

您必须给出过渡时间才能看到轮换。您的代码正在运行。

transition: all 1s ease;

#clock {
border-radius: 100px;
height: 79px;
width: 79px;
transition: all 1s ease;
background: url('https://s3.postimg.io/3k6hhoafn/download.png');
}
#clock:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<body>
<div id="clock"></div>
</body>

这是工作的 JSFiddle 版本: https://jsfiddle.net/8j900hz0/2/

关于html - 时钟旋转 360 度不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39056207/

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