用纯CSS可以做元素3D旋转的效果吗

发布时间：2023-09-20 15:40:55 所属栏目：语言来源：

导读：　　这篇文章主要介绍了用纯CSS能做元素3D旋转的效果吗相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇用纯CSS能做元素3D旋转的效果吗文章都会有所收获，下面我们一起来看看吧。

　

　　这篇文章主要介绍了用纯CSS能做元素3D旋转的效果吗相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇用纯CSS能做元素3D旋转的效果吗文章都会有所收获，下面我们一起来看看吧。

　　主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果

　　效果

　　HTML代码

　　<body>

　　    <div class="box">

　　        <div class="face front">

　　            <h2>前面</h2>

　　        </div>

　　        <div class="face back">

　　            <h2>背面</h2>

　　        </div>

　　    </div>

　　</body>

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

　　*{

　　    margin: 0;

　　    padding: 0;

　　}

　　body{

　　    width: 100%;

　　    height: 100vh;

　　    display: flex;

　　    justify-content: center;

　　    align-items: center;

　　    background: #333;

　　}

　　box 属性设置

　　.box{

　　    width: 300px;

　　    height: 400px;

　　    transform-style: preserve-3d;

　　    position: 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(0deg);

　　}

　　前面属性设置

　　.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(360deg);

　　}

　　设置文字的悬浮效果

　　.box .face h2{

　　    font-size: 4em;

　　    text-transform: uppercase;

　　    transform: perspective(500px) translateZ(50px);

　　}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!