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

  • 时间:2020-04-24 14:49 作者:CoderMiner 来源: 阅读:47
  • 扫一扫,手机访问
摘要:主要使用CSS中的 preserve 3d 、perspective 属性实现3D效果效果GIF.gifHTML代码 body div class="box" div class="face front" h2 前面 /h2 /

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

效果

GIF.gif

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);}
  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
【系统环境|windows】初识webRTC(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部