悬停时的CSS 3旋转动画[重复]

Posted 2023-05-08

【中文标题】悬停时的CSS 3旋转动画[重复]

【英文标题】：CSS 3 Rotate Animation on hover [duplicate]

【发布时间】：2015-12-15 13:31:02

【问题描述】：

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

我需要完整的 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>

【问题讨论】：

也提供一些html

我刚刚编辑了标题并在我的问题中添加了一些文字

顺便说一句，你应该把class=".icon-style-1"改成class="icon-style-1"

【参考方案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>

【讨论】：

在我的代码中不起作用；这是真正的 html '' jsfiddle.net/r9vz9mht

@JPashs - 这里 demo with your html

仅适用于 Safari。不适用于 Chrome 和 Firefox v40

@JPashs.. 我这里没有safari，我在 chrome 本身测试后给出了解决方案.. :)

【参考方案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;

【讨论】：

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

所以你应该添加一个过渡属性...

好的，我刚刚编辑了标题并在我的问题中添加了一些文字。

在我的回答中添加了它

是一个错字只是一个错误

【参考方案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>

【参考方案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>

【讨论】：

工作，但它翻转元素，我需要旋转。

@JPashs 请现在试试，我拿走了你的代码并修复了它。

@JPashs 我查看了其他答案 cmets，JSFiddle with your real HTML。