css 卡片翻转效果实现

最新推荐文章于 2024-04-29 09:47:00 发布

烂不烂问厨房

最新推荐文章于 2024-04-29 09:47:00 发布

阅读量194

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_44294359/article/details/132348348

版权

直接贴代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style>
.box {
  width: 300px;
  height: 300px;
  color: #fff;
  position: relative;
  transition: 2s ease-in-out;
}

  .front {
    width: 300px;
    height: 300px;
    position: absolute;
    transition: 2s ease-in-out;
    background-color: pink;
  }
  .back {
    width: 300px;
    height: 300px;
    background-color: #000;
    position: absolute;
    backface-visibility:hidden;
    transform: rotateY(180deg);
    transition: 2s ease-in-out;
  }
.box:hover .front{
  transform: rotateY(180deg);
}
.box:hover .back{
  transform: rotateY(360deg);
}


</style>
<body>

<div class="box">
  <div class="front">我是翻转前</div>
  <div class="back">我是翻转后</div>
</div>

</body>
</html>