css实现卡片翻转效果

最新推荐文章于 2025-03-20 17:17:42 发布

daydayup1207

最新推荐文章于 2025-03-20 17:17:42 发布

阅读量841

点赞数 2

分类专栏：基础知识小功能文章标签： css翻转效果

本文链接：https://blog.youkuaiyun.com/qiladuo1207/article/details/96162168

版权

基础知识同时被 2 个专栏收录

9 篇文章

订阅专栏

小功能

5 篇文章

订阅专栏

html:

<div class="cont">
    <div class="contBefore">
       前边内容
    </div>
    <div class="contAfter">
       翻转后内容
    </div>
</div>

css:

.cont{
    width: 200px;
    height: 200px;
    margin: 200px auto 0;
    position: relative;
    color: #fff;
}
.cont .contBefore{
    width: 200px;
    height: 200px;
    background: #0b6aff;
    /*动画的过渡时间*/
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;

}
.cont .contAfter{
    width: 200px;
    height: 200px;
    background: red;
    /*1.通过定位，使背面覆盖前面*/
    position: absolute;
    top: 0;
    left: 0;
    /*2.使用rotate翻转,背面初始翻转180*/
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
   /* 隐藏所翻转的元素*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
.cont:hover .contAfter{
    /*鼠标移入时，背面翻转为0，显示出来*/
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.cont:hover .contBefore{
    /*鼠标移入时，前面翻转180*/
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}