CSS变换旋转不起作用答案

【问题标题】：CSS transform rotation do not workCSS变换旋转不起作用
【发布时间】：2015-03-30 08:09:44
【问题描述】：

这很简单，但行不通。

HTML：

 <div id="add_content">Rotate Before at hover</div>

CSS：

#add_content {
    margin: 30px;
}
#add_content:before {
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:before:hover  {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
}

http://fiddle.jshell.net/nu6EA/5/

不要轮换工作

【问题讨论】：

似乎是悬停不起作用，而不是旋转（将background-color: blue 添加到:before:hover 以查看此内容。请参阅stackoverflow.com/questions/8874326/…

标签： html css

【解决方案1】：

你的:hover必须在:before之前。试试这个CSS：

#add_content {
    margin: 30px;

}
#add_content:before {
    transition: all .2s ease-in;
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:hover:before  {
    transform: rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
}

更新小提琴：http://fiddle.jshell.net/nu6EA/6/

【讨论】：

1. :hover 必须在:before 之前 2. 需要添加transition: all .2s ease-in; 谢谢@aRahmanS29！
@ДмитрийФролов，仅供参考：您需要接受可以帮助您解决问题的答案之一。另外不要忘记对对您有帮助的答案进行投票。检查这个：stackoverflow.com/help/someone-answers
@aRahmanS29 您的回答绝对值得一票。有时人们来问就走。对社区没有意义......

【解决方案2】：

改为在div:hover 中更改:before 伪元素：

#add_content {
  margin: 30px;
}
#add_content:before {
  background-color: red;
  content: 'a';
  padding: 5px 10px;
  margin-right: 10px;
  display: inline-block;
}
#add_content:hover:before {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

&lt;div id="add_content"&gt;Rotate Before at hover&lt;/div&gt;

【讨论】：

【解决方案3】：

我猜你想为悬停时的旋转设置动画...试试这个代码：http://fiddle.jshell.net/nu6EA/9/

#add_content {
    margin: 30px;
}
#add_content::before {
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:hover:before  {
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    100% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes mymove {
    100% {transform: rotate(360deg);}
}

【讨论】：

更新了小提琴...抱歉之前的链接没有映射到我放入块中的代码