2017.12.6

来源：互联网发布：高晓松吴彦祖知乎编辑：程序博客网时间：2024/06/07 18:42

<!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>

参照冒险岛官网做了个旋转的demo

阅读全文

0 0