Question

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

请解释为什么我的时钟没有旋转并修正错误。

Answer 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/

Answer 2

将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;
}

Answer 3

我已更新了您的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);
}

时钟旋转360度不工作

3 个答案: