css3翻转效果

来源：互联网发布：asp.net报名系统源码编辑：程序博客网时间：2024/05/17 10:43

鉴于经常忘记这效果实现，今天痛定思痛，决定记录一下。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
<style>
   .box{
       height: 200px;
       width: 200px;
       transform-style: preserve-3d;
       transform: perspective(1000px);
       position: relative;
   }
   .box div{
       height: 200px;
       width: 200px;
       position: absolute;
   }
   .before{
       background: blue;
       z-index: 2;
       top:0;
       left:0;
   }
   .after{
       background: green;
       z-index: 1;
       top:0;
       left:0;
       transform: rotateY(180deg);
   }
   @keyframes change{
       0%{
           transform: rotateY(0deg);
       }
       50%{
           transform: rotateY(180deg);
       }
       100%{
           transform: rotateY(360deg);
       }
   }
   .box{animation: change 3s infinite;}
</style>
</head>
<body>
   <div class="box">
       <div class="before">前面</div>
       <div class="after">后面</div>
   </div>
</body>
</html>

0 0