求大神指教 为毛我这个不能转呢
<!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>
<link href="幽灵按钮.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="box">
<div class="link link-miss">
<span class="icon"></span>
<a href="#" class="button" data="My mission is clear">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span> MISSION</a>
</div>
<div class="link link-play">
<span class="icon"></span>
<a href="#" class="button" data="This is my background">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span> PLAY</a>
</div>
<div class="link link-touch">
<span class="icon"></span>
<a href="#" class="button" data="This is my first touch">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span> TOUCH</a>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{margin:0;
padding:0;}
body{background:#333;}
.box{width:800px;
height:280px;
margin:50px auto;
overflow:hidden;}
.box .link{display:inline-block;
width:205px;
height:280px;
margin:0 20px;
positive:relative;}
.link .icon{display:block;
width:100%;
height:190px;
transition:ease-out 0.2s;
}
.link .icon:hover{transform:rotate(360deg) scale(1.2);}
.link-miss ,icon{background:url(img/mission.png) no-repeat center 0;}
.link-play ,icon{background:url(img/play.png) no-repeat center 0;}
.link-touch ,icon{background:url(img/touch.png) no-repeat center 0;}
