CSS3两面盒子翻转（backface-visibility的使用）

Mzp风可名喜欢

已于 2022-11-25 20:51:19 修改

阅读量541

点赞数

文章标签： css3 css html

于 2022-11-25 20:46:24 首次发布

本文链接：https://blog.csdn.net/mzp520lf/article/details/128043905

版权

CSS3两面盒子翻转（backface-visibility的使用）

CSS3两面盒子翻转

CSS3两面盒子翻转

backface-visibility的使用

CSS3两面盒子翻转

在这里插入图片描述

代码

<!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>
    <link rel="stylesheet" href="iconfont.css">
    <style>
        bady {
            perspective: 500px;
            transform-style: preserve-3d;
        }
        
        .box {
            perspective: 500px;
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all 2s;
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(180deg);
        }
        
        .box:hover .two {
            z-index: 2;
        }
        
        .box .one,
        .box .two {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            border-radius: 50%;
        }
        
        .one {
            background-color: pink;
            z-index: 1;
        }
        
        .two {
            background-color: blue;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">
            <p>hello</p>
        </div>
        <div class="two">word</div>
    </div>
</body>

</html>

相信大家之前这样写过，但是不管怎么样页面上呈现的一直是holle，这是因为我们给写有hello的这个盒子我们加了z-index：1； 这导致hello这个盒子一直在上面显示。

解决问题的方法

在hello那个盒子的css里加上 **backface-visibility: hidden;**属性

.one {
            background-color: pink;
            z-index: 1;
           -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

backface-visibility: hidden;（背面隐藏）

使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果。当你翻转一个元素的时候，你看到的是什么？通常情况下，我们应该看到的是元素的背面，这是正常的情况，但是有时候我们希望翻转一个元素后看到的是另一个元素。通过backface-visibility:hidden;属性，我们可以使一个元素在翻转之后消失，这是可以使用另一个元素放在它的背面，从而制作出一种元素翻转之后出现另一个元素的效果。
在这里插入图片描述