css3翻转效果

最新推荐文章于 2025-03-20 18:59:14 发布

原创最新推荐文章于 2025-03-20 18:59:14 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现的3D翻转效果，通过设置不同的样式属性，可以使一个盒子元素在悬停时展现出翻转动画。该效果利用了CSS3中的transform属性和动画关键帧来完成。

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

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