css卡片翻转

卯足劲往前冲

于 2024-02-19 15:06:49 发布

阅读量385

点赞数 8

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_47190975/article/details/136170571

版权

正常显示鼠标悬浮

1. 定义一个卡片div容器，设置相对定位和一些基础样式

<div class="card"></div>
.card {
        position: relative;
        width: 400px;
        height: 100px;
        text-align: center;
        line-height: 100px;
       }

2.往卡片容器中放入两个盒子，一个前面，一个背面。

<div class="card">
     <div class="front">前面内容</div>
     <div class="back">后面内容</div>
</div>
.front,
    .back {
        // 两个盒子都设置绝对定位，重叠在一起
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        border-radius: 10px;
        // 关键属性，让元素翻转时背面隐藏
        backface-visibility: hidden;
        transition: all 1s ease;
    }

    .front {
        background-color: brown;
    }

    .back {
        background-color: darkcyan;
        // 让背面一开始就翻转，配合上面隐藏背面的属性就只会显示前面的内容
        transform: rotateY(180deg);
    }

3. 给容器添加动画效果（完成代码）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="card">
        <div class="front">前面内容</div>
        <div class="back">后面内容</div>
    </div>
</body>
<style>
    .card {
        position: relative;
        width: 400px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

    .card:hover .front {
        transform: rotateY(-180deg);
    }
    .card:hover .back{
        transform: rotateY(0);
    }

    .front,
    .back {
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        border-radius: 10px;
        backface-visibility: hidden;
        transition: all 1s ease;
    }

    .front {
        background-color: brown;
    }

    .back {
        background-color: darkcyan;
        transform: rotateY(180deg);
    }
</style>

</html>