css 卡片翻转动效

最新推荐文章于 2024-07-17 17:48:42 发布

呼~先生

最新推荐文章于 2024-07-17 17:48:42 发布

阅读量231

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52492583/article/details/127321283

版权

// 外面大盒子
<div class="box">
    <div class="front">
       正面
    </div>
    <div class="back">
       背面
    </div>
</div>


 .box {
    position: relative;
    width: 200px ;
    height: 300px ;
    margin: 0 auto;
    transition: all 3s;
    transform-style: preserve-3d;  // 打开3d
  }
  .front, .back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .front {
    width: 200px ;
    height: 300px;
    background-color: green;
    z-index: 1;
    backface-visibility: hidden;  // 选择隐藏背面
    opacity: 1;
    
  }
  .back {
    width: 200px ;
    height: 300px ;
    background: rebeccapurple;
    transform: rotateY(180deg);
    /* transform-style: preserve-3d; */
    
  }
  .box:hover {
    transform: rotateY(180deg);
  }