如何使用css3 rotate和setinterval旋轉圖像？

我想使用css3旋轉和javascript設置間隔旋轉圖像。圖像應該在鼠標懸停時旋轉。任何人都知道如何？如何使用css3 rotate和setinterval旋轉圖像？

2012-03-25 sgb91

你甚至不需要JavaScript來做到這一點;只需在元素上放置一個transform的轉換，並在懸停上應用旋轉。例如：

div { 
    background-color: red; 
    height: 100px; 
    -webkit-transition: -webkit-transform 0.5s ease-in-out; 
     -moz-transition: -moz-transform 0.5s ease-in-out; 
     -o-transition:  -o-transform 0.5s ease-in-out; 
      transition:   transform 0.5s ease-in-out; 
    width: 100px; 
} 

div:hover { 
    -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
      transform: rotate(90deg); 
}

Here's a demo.

來源

2012-03-25 17:16:56 Ryan

您可以使用CSS3與瀏覽器以及特定的變換屬性變換屬性來旋轉，並指定程度要旋轉

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
div 
{ 
width:200px; 
height:100px; 
background-color:yellow; 
/* Rotate div */ 
transform:rotate(7deg); 
-ms-transform:rotate(7deg); /* Internet Explorer */ 
-moz-transform:rotate(7deg); /* Firefox */ 
-webkit-transform:rotate(7deg); /* Safari and Chrome */ 
-o-transform:rotate(7deg); /* Opera */ 
} 
</style> 
</head> 
<body> 

<div>Hello</div> 

</body> 
</html>

來源

2012-03-25 17:17:33

如何使用css3 rotate和setinterval旋轉圖像？

回答

相關問題