时钟旋转 360 度不工作答案

【问题标题】：clock rotating 360 degrees not working时钟旋转 360 度不工作
【发布时间】：2016-08-20 16:09:42
【问题描述】：

假设我有一个时钟的图像，我希望它在 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，它显示了我的时钟应该是什么样子。

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

【问题讨论】：

您的时钟正在旋转 360°！你只是看不到它，因为没有过渡

标签： html css

【解决方案1】：

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

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/

【讨论】：

【解决方案2】：

我已经更新了你的jsfiddle。

也请查看transition property link。

您的时钟旋转 360 度，这意味着您将鼠标悬停在它上面后，您将获得相同的结果。要查看时钟旋转，您必须添加一个 css transition 属性。

这是更新后的代码。

#clock {
    border-radius: 100px;
    height: 79px;
    width: 79px;
    transition: 2s; /*or however many seconds you want it*/
    background: url('https://s3.postimg.io/3k6hhoafn/download.png');
}
#clock:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

【讨论】：

感谢您对我的时钟为什么不旋转的精彩解释。

【解决方案3】：

将transition 添加到#clock id。

#clock {
    border-radius: 100px;
    height: 79px;
    width: 79px;
    background: url('https://s3.postimg.io/3k6hhoafn/download.png');
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

【讨论】：