翻转的卡片

最新推荐文章于 2022-09-15 09:48:54 发布

zxf_CN

最新推荐文章于 2022-09-15 09:48:54 发布

阅读量206

点赞数

分类专栏： html css

原文链接：https://www.bilibili.com/video/BV1j441197nb?share_source=copy_web

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

前言：

第二篇 CodingStartup起码课的视频练习，这几天都在看他的视频，然后跟着做出效果来。HTML+CSS 制作翻牌效果

效果图：

在这里插入图片描述

要点：

使用 position 设置 2 个卡片重叠；正为正面，反为背面（ transform: roateY(-180deg)，待会旋转时，正旋转 180，变为背面，反旋转 0，回到正面；
设置正在上面（不是使用 z-index，而是使用 backface-visibility: hidden 让处于背面的 div 隐藏；
然后设置透视深度，给包裹在外层的 div 设置 perspective: 1000px 。

以下是代码：

    <div class="max">
        <div class="box">
            <div class="positive">正</div>
            <div class="back">反</div>
        </div>
    </div>

* {
    padding: 0;
    margin: 0;
}

html {
    font-size: 22px;
}

body {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    background-image: radial-gradient( circle farthest-corner at 0% 0.5%,  rgba(241,241,242,1) 0.1%, rgba(224,226,228,1) 100.2% );
}

/* 设置 透视深度 */
.max {
    perspective: 1000px;
}

.box {
    position: relative;
    width: 400px;
    height: 500px;
    display: block;
}

.box > div {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 4rem;
    transition: transform 0.5s ease-in-out;  /* 过渡动画 */

    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 12px 0px #777;
}

/* 设置正div，显示背面时，隐藏 */
.box .positive {
    backface-visibility: hidden;
    background-image: linear-gradient( 109.6deg,  rgba(254,87,98,1) 11.2%, rgba(255,107,161,1) 99.1% );
}
/* 鼠标移上时，顺时针旋转 180 deg */
.box:hover .positive {
    transform: rotateY(180deg);
    
}

/* 一开始设置 反 的 背面在前面，然后隐藏， 正div 就显示出来了 */
.box .back {
    transform: rotateY(-180deg);
    backface-visibility: hidden;
    background-image: linear-gradient( 102.1deg,  rgba(96,221,142,1) 8.7%, rgba(24,138,141,1) 88.1% );
    
}
/* 鼠标移上时，变化原来的样子 */
.box:hover .back {
    transform: rotateY(0deg);
}