<!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=gb2312" />
<title>rotate</title>
<style>
*{
margin:0px;
padding:0px;
}
#wrap{
width:1919px;
height:985px;
background-color:rgba(0,0,0,1);
}
.pic1{
width:213px;
height:213px;
margin-top:350px;
margin-left:850px;
position:absolute;
z-index:10;
background-image:url(1.png);
}
.pic1 a{
display:block;
width:100%;
height:100%;
text-indent:-999em;
}
.pic1 a i{
display:block;
width:100%;
height:100%;
background-image:url(2.png);
}
.pic1 a:hover i{
animation:flip 1s 0s ease both;
transition:all 0s .2s;
}
@-webkit-keyframes flip
{
0%{ transform:perspective(300px)
rotate3d(0,1,0,360deg);
transition-timing-function:ease-in;
opacity:1}
20%{
transform:perspective(300px)
rotate3d(0,1,0,270deg);
transition-timing-function:ease-in;
opacity:1}
21%{
transform:perspective(300px)
rotate3d(0,1,0,90deg);
transition-timing-function:ease-in;
opacity:1}
40%{
transform:perspective(300px)
rotate3d(0,1,0,-40deg);
transition-timing-function:ease-in
opacity:1}
60%{
transform:perspective(300px)
rotate3d(0,1,0,20deg);
opacity:1}
80%{
transform:perspective(300px)
rotate3d(0,1,0,-5deg)
opacity:1}
100%{-webkit-transform:perspective(300px);
transform:perspective(300px)
opacity:1}
}
</style>
</head>
<body>
<div id="wrap">
<div class='pic1'>
<a href="../slider/slider.html"><i>进入官网</i></a>
</div>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>rotate</title>
<style>
*{
margin:0px;
padding:0px;
}
#wrap{
width:1919px;
height:985px;
background-color:rgba(0,0,0,1);
}
.pic1{
width:213px;
height:213px;
margin-top:350px;
margin-left:850px;
position:absolute;
z-index:10;
background-image:url(1.png);
}
.pic1 a{
display:block;
width:100%;
height:100%;
text-indent:-999em;
}
.pic1 a i{
display:block;
width:100%;
height:100%;
background-image:url(2.png);
}
.pic1 a:hover i{
animation:flip 1s 0s ease both;
transition:all 0s .2s;
}
@-webkit-keyframes flip
{
0%{ transform:perspective(300px)
rotate3d(0,1,0,360deg);
transition-timing-function:ease-in;
opacity:1}
20%{
transform:perspective(300px)
rotate3d(0,1,0,270deg);
transition-timing-function:ease-in;
opacity:1}
21%{
transform:perspective(300px)
rotate3d(0,1,0,90deg);
transition-timing-function:ease-in;
opacity:1}
40%{
transform:perspective(300px)
rotate3d(0,1,0,-40deg);
transition-timing-function:ease-in
opacity:1}
60%{
transform:perspective(300px)
rotate3d(0,1,0,20deg);
opacity:1}
80%{
transform:perspective(300px)
rotate3d(0,1,0,-5deg)
opacity:1}
100%{-webkit-transform:perspective(300px);
transform:perspective(300px)
opacity:1}
}
</style>
</head>
<body>
<div id="wrap">
<div class='pic1'>
<a href="../slider/slider.html"><i>进入官网</i></a>
</div>
</div>
</body>
</html>
参照冒险岛官网做了个旋转的demo