4、CSS3 实现卡片旋转正面与背面（赋代码）

最新推荐文章于 2024-06-13 15:12:21 发布

cyz141001

最新推荐文章于 2024-06-13 15:12:21 发布

阅读量276

点赞数 2

分类专栏：前端微型项目文章标签： css3 前端 css

本文链接：https://blog.csdn.net/cyz141001/article/details/139351527

版权

前端微型项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果例图：

1、首先是html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./3.css">
    <title>Document</title>
</head>

<body>
    <div class ="card">
        
        <div class="front">
                <h2>正面</h2>
        </div>

        <div class="back">
            <h2>背面</h2>
        </div>
    </div>
</body>
</html>

2、css3 关键代码：

.card{
    position: relative;
    width: 300px;
    height: 200px;
}
.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;
    display: flex;
    justify-content: center;
    align-items: center;
}
.front{
    background-color: brown;
}
.back{
    background-color: darkcyan;
    transform: rotateY(180deg);
}