旋转或旋转hover的图像

我想知道如何在旋转或旋转图像时进行旋转 。 我想知道如何在下面的代码中用CSS来模拟这个function:

4 Solutions collect form web for “旋转或旋转hover的图像”

您可以使用CSS3转换来旋转hover的图像

旋转图像:

DEMO

 img { border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } img:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
 <img src="http://i.imgur.com/3DWAbmN.jpg" /> 

这很简单。

  1. 你添加一个图像。
  2. 你创build一个CSS属性到这个图像。

     img { transition: all 0.3s ease-in-out 0s; } 
  3. 你添加一个这样的animation:

     img:hover { cursor: default; transform: rotate(360deg); transition: all 0.3s ease-in-out 0s; } 

如果要旋转内联元素,则应先将内联元素设置为内inline-block

“`

 i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } } 

“`

这里是使用css3的自动旋转和旋转缩放效果

 #obj1{ float:right; width: 96px; height: 100px; -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ animation: mymove 20s infinite; animation-delay:2s; background-image:url("obj1.png"); transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ margin-bottom: 70px; } #obj2{ float:right; width: 96px; height: 100px; -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ animation: mymove 20s infinite; animation-delay:2s; background-image:url("obj2.png"); transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ margin-bottom: 70px; } #obj6{ float:right; width: 96px; height: 100px; -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ animation: mymove 20s infinite; animation-delay:2s; background-image:url("obj6.png"); transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ margin-bottom: 70px; } /* Standard syntax */ @keyframes mymove { 50% {transform: rotate(30deg); } <div style="width:100px; float:right; "> <div id="obj2"></div><br /><br /><br /> <div id="obj6"></div><br /><br /><br /> <div id="obj1"></div><br /><br /><br /> </div> 

这是演示

  • 如何在鼠标上显示工具提示或项目信息?
  • 如何在支持触摸的浏览器中使用触摸模拟hover?
  • 如何debuggingCSS / Javascripthover问题
  • hover时如何在图像上显示文字?
  • 如何影响其他元素,当div被徘徊
  • iPad / iPhone盘旋问题导致用户双击链接
  • 当鼠标hover在绝对div上时,jQuery禁用滚动
  • 有什么办法可以将鼠标hover在一个元素上并影响不同的元素?
  • 使用CSS / HTML更改hover图片
  • 是否有可能只改变hover的rgba背景颜色的阿尔法?
  • 如何删除WPFbutton上的默认鼠标hover效果?