使用css3 实现3d正反翻转特效

最新推荐文章于 2024-09-19 14:11:58 发布

暮志未晚NAN

最新推荐文章于 2024-09-19 14:11:58 发布

阅读量2.7k

点赞数 4

分类专栏： html5 文章标签： css css3 html5 特效翻转

本文链接：https://blog.csdn.net/qq_30100043/article/details/103904667

版权

html5 专栏收录该内容

46 篇文章 3 订阅

订阅专栏

首先，上传一下最终效果：
3d翻转图片
接下来，我们按照结构来实现当前的demo效果：

第一步，创建一个触发hover效果的容器，并设置3d距离：

<!--item 可以触发翻转的区域-->
<div class="item">
...
</div>

设置.item的perspective属性距离，就是3d效果的z轴距离，浏览器默认就xy两个轴向，css3增加了z轴，就是当前2d平面的3d距离，单位是像素。我们在这里设置了3d距离是perspective:500px;

第二步，创建了翻转的容器，里面放置了显示正面内容和背面内容的div

<!--box 可以翻转的容器-->
    <div class="box">
        <!--font 默认显示的正面-->
        <div class="font">正面</div>
        <!--back 背面-->
        <div class="back">背面</div>
    </div>

.box作为翻转的容器，我们需要通过css将其转换为3d翻转样式，并设置了变换时间为1秒：

transition:all 1s;
transform-style: preserve-3d;

并在鼠标悬停在.item上面的时候，让.box沿y轴翻转180度：

        .item:hover .box{
            transform: rotateY(180deg);
        }

实现到这里以后，我们基本就实现了可以翻转，接下来还要实现盒子里面正反面都有内容。

第三部，实现正反面的div，重点是设置背面不可见

<!--font 默认显示的正面-->
<div class="font">正面</div>
<!--back 背面-->
<div class="back">背面</div>

做第二步的时候，我们也可以发现，在翻转的div .box内创建了两个div 正面一个背面一个，首先我们把这两个盒子都设置绝对定位，两个盒子都设置翻转盒子的宽高

            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            text-align: center;
            line-height: 200px;

接下来重点来了，我们如何设置翻转以后，让盒子在背面不可见（默认盒子翻转以后还是可见的），需要用到css属性backface-visibility，我们将其设置一下：

backface-visibility: hidden;

还有最后一步，就是让.back的div默认反向显示，只需要让其沿y轴旋转180度即可：

        .back{
            transform: rotateY(180deg);
        }

这样，就完成了一个翻转的案例，下面放上全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3d翻转</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .item{
            width:200px;
            height:200px;
            perspective:500px;
        }

        .box{
            background: #abb9c5;
            width:100%;
            height:100%;
            transition:all 1s;
            transform-style: preserve-3d;
            position: relative;
        }

        .item:hover .box{
            transform: rotateY(180deg);
        }

        .font, .back{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            text-align: center;
            line-height: 200px;

            backface-visibility: hidden;
        }

        .back{
            transform: rotateY(180deg);
        }

    </style>
</head>
<body>
<!--item 可以触发翻转的区域-->
<div class="item">
    <!--box 可以翻转的容器-->
    <div class="box">
        <!--font 默认显示的正面-->
        <div class="font">正面</div>
        <!--back 背面-->
        <div class="back">背面</div>
    </div>
</div>
</body>
</html>