使用纯CSS实现3D旋转效果的示例代码

主要使用CSS中的 PR eserve-3d 、 PE rspective 属性实现3D效果

效果

HT ML 代码

<body>
    <div class="box">
        <div class="face front">
            <h2>前面</h2>
        </div>
        <div class="face back">
            <h2>背面</h2>
        </div>
    </div>
</body>

为了演示效果，将元素居中，body的css设置

*{
    m arg in: 0;
    padding: 0;
}

body{
    width: 100%;
    h ei ght: 100vh;
    dis play : flex;
    justify-content:  center ;
    align -i tems: center;
    background:  # 333;
}

box 属性设置

.box{
    width: 300px;
    height: 400px;
    transform -s tyle: preserve-3d;
    pos IT ion: relative;
}

.face{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    transition: 2s ease-in-out;
    transform: perspective(500px) rotateY(0 deg );
}

前面属性设置

.face.front{
    background: #ff0;
}

背面属性设置,在Y轴旋转 180度,先不显示

.face.back{
    background: #3bc2ff;
    color: #fff;
    transform: perspective(500px) rotateY(180deg);
}

设置悬浮的动画效果

.box:hover .face.front{
    transform: perspective(500px) rotateY(180deg);
}

.box:hover .face.back{
    transform: perspective(500px) rotateY( 360 deg);
}

设置文字的悬浮效果

.box .face h2{
    font- Size:  4em;
    text -t ransform: uppercase;
    transform: perspective(500px) translateZ(50px);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是为你收集整理的使用纯CSS实现3D旋转效果的示例代码全部内容，希望文章能够帮你解决使用纯CSS实现3D旋转效果的示例代码所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于使用纯CSS实现3D旋转效果的示例代码的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200991

更新时间：2023-04-27 阅读：28次