悬停时的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

所以在这里你可以在普通元素样式上使用transition 并在hover 和External DEMO HERE 上添加旋转

.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) ;
}

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

Answer 2

360 度旋转它回到原来的位置。你可能希望它是 180 度；

如果你想要它动画，你需要添加一个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 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>