鼠标放上去实现图片旋转 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片</title>
<style>
*{
 margin: 0;
 padding: 0;
}
 div{
  width: 500px;
  height: 800px;
  background-image: url(./01.JPG);
  margin: 0 auto;
 }
 #son{
  width: 300px;
  height: 454px;
  background: orange;
  float: right;
  margin-top: 50px;
 }
 li{
  list-style-type: none;
  float: left;
  margin-right: 1px;
 }
 img{
  width: 98px;
 }
 li img{
  transform: rotateX(-135deg) rotate(-270deg);
 }
 #fl{
  width: 100px;
  height: 200px;
  margin: 0 auto;
 }
 #fl img:hover{
  transition-duration: 1s; 　　　　 　　　　 //延时过渡   //要与delay区分
  -moz-transition-duration: 1s; 　　　　　　/* Firefox 4 */
  -webkit-transition-duration: 1s; 　　　　 /* Safari 和 Chrome */
  -moz-transform:rotate(360deg) scale(1.5); -webkit-transform:rotate(360deg) scale(1.5);  　　  //-moz-transform:rotate(360deg)火狐旋转角度   scale(1.5)：图片变大1.5倍
 }
</style>
</head>
 
<body>
    <div>
     <div id="fl"><img src="./03.JPG" alt="" /></div>
     
       <li><img src="./01.JPG" alt="" /></li>
     
     </div>
    </div>
</body>
</html>

 

posted @ 2014-12-01 18:19  人间最美二月天  阅读(834)  评论(0)  编辑  收藏  举报