css3翻转效果

最新推荐文章于 2024-04-14 21:53:28 发布

Whj_s

最新推荐文章于 2024-04-14 21:53:28 发布

阅读量428

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/a8845/article/details/62933237

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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