CSS 3在悬停时旋转动画

Question

我有这个代码在悬停时进行旋转。它根本不起作用。它有什么问题？

我需要完整的旋转动画360º

.icon-style-1 .builder-element-icon {
    height: 100px;
    width: 100px;
    line-height: 100px;
    background: blue;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: white;
}    

.icon-style-1 .builder-element-icon:hover {
    background: green;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

<div class="icon-style-1">
    <span class="builder-element-icon fa fa-camera"></span>
</div>

Answer 1

360度将其旋转回原来的位置。你可能希望它是180度;

如果你想要animatad，你需要添加transition：

.icon-style-1 .builder-element-icon{
  height: 100px;
  width: 100px;
  line-height: 100px;
  background: blue;
  line-height: 100px;
  text-align: center;
  margin: 0 auto;
  display: block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: white;

  -moz-transition: -moz-transform ease 0.6s;
  -webkit-transition: -webkit-transform ease 0.6s;
  -o-transition: -o-transform ease 0.6s;
  -ms-transition: -ms-transform ease 0.6s;
  transition: transform ease 0.6s;
}    

.icon-style-1 .builder-element-icon:hover{
    background: green;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);

}

<div class="icon-style-1">
<span class="builder-element-icon fa fa-camera">a</span>
</div>

如果您想要将背景颜色设置为动画，则可以使用

替换transition: transform ease 0.6s;

transition: transform ease 0.6s, background ease 0.6s;

或

transition: all ease 0.6s;

Answer 2

因此，您可以使用正常元素样式的transition并在hover和 External DEMO HERE

上添加旋转

＆＃13;

＆＃13;

.icon-style-1 .builder-element-icon{
    height: 100px;
    width: 100px;
    line-height: 100px;
    background: blue;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: white;
   /* Firefox */
	-moz-transition: all 1s ease;
	/* WebKit */
	-webkit-transition: all 1s ease;
	/* Opera */
	-o-transition: all 1s ease;
	/* Standard */
	transition: all 1s ease;
}    

.icon-style-1 .builder-element-icon:hover{
    background: green;
    /* Firefox */
	-moz-transform: rotate(360deg) ;
	/* WebKit */
	-webkit-transform:  rotate(360deg);
	/* Opera */
	-o-transform: rotate(360deg) ;
	/* Standard */
	transform: rotate(360deg) ;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="icon-style-1">
    <div class="builder-element-icon glyphicon glyphicon-camera">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用CSS3过渡来实现此结果。

只需将鼠标移到标签上即可。

#rotatable {
    font-size: 30px;
}

#rotatable:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

<span id="rotatable">I can rotate!</span>

Answer 4

您忘了添加CSS Transitions。此外，您现在不需要使用-moz，-ms和-o供应商前缀，请参阅Can I Use：

JSFiddle

.icon-style-1 .builder-element-icon {
    height: 100px;
    width: 100px;
    line-height: 100px;
    background: blue;
    text-align: center;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
    color: white;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}    

.icon-style-1 .builder-element-icon:hover {
    background: green;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="icon-style-1">
    <span class="builder-element-icon fa fa-camera"></span>
</div>