旋转或旋转hover的图像

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

img { border-radius: 50%; } 

 <img src="http://i.imgur.com/3DWAbmN.jpg" /> 

Answer 1

您可以使用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" /> 

Answer 2

这很简单。

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

Answer 3

如果要旋转内联元素，则应先将内联元素设置为内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); } } 

“`

Answer 4

这里是使用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> 

这是演示