如何利用css实现div卡片翻转_css 卡片翻转-CSDN博客

本文链接：https://blog.csdn.net/weixin_44054563/article/details/131852101

实现效果：

本文是在画前端页面时遇到的一个css样式问题的记录，如有错误的地方，请多多指正~我会继续努力加油~~

一、首先画出外部div

外部div——box

css样式，需要给外部设定一个固定大小。添加了 perspective属性：3D 元素距视图的距离。更能直观的感受到翻转效果的变化。

二、内部两个div

首先先写出两个div的默认样式，圆角为4px，背景颜色设置了一下。

其次就是两个div的正面样式和反面样式。两个div都需要添加翻转时的过渡效果，因此利用transform这个属性来实现。而面对正面时，front的样式是正常的，对于反面的样式opposite是需要设置一下位置和显隐。

最后就是需要设置点击翻转后两个div的样式了。

整体的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻转样式</title>
    <link href="../fanzhuan.css" rel="stylesheet" >

</head>
<body>
  <div class="box"  id="reverse"   onclick="changeReverse()">
      <div class="box-front">正面</div>
      <div class="box-opposite">反面</div>
  </div>
</body>
</html>
<script>
    var isRolling=false
    function changeReverse(){
        isRolling=!isRolling
        if(isRolling){
            var boxClass=document.getElementById("reverse")
            boxClass.className="box box_reverse"

        }else {
            var boxClass1=document.getElementById("reverse")
            boxClass1.className="box"
        }
    }

</script>

css文件

.box {
  width: 100%;
  height: 300px;
    text-align: center;
  padding: 10px 5px;
  position: relative;
  perspective: 1000px;

  .box-front, .box-opposite{
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition-duration: .5s;
    transition-timing-function: 'ease-in';
  }

  .box-opposite {
    transform: rotateY(180deg);
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

}
.box-front{
    width: 200px;
    height: 300px;
    border-radius: 4px;
    background-color: #ee8c59;

}
.box-opposite{
    width: 200px;
    height: 300px;
    border-radius: 4px;
    background-color: #ce8483;
}
.box_reverse{
    .box-front{
        transform: rotateY(180deg);
        visibility:hidden;
    }
    .box-opposite{
        transform: rotateY(360deg);
        visibility:visible;
    }
}

参考文章：

Vue 牌面翻转效果_vue翻转_心花怒放开到荼蘼的博客-CSDN博客