当前位置：主页 > 查看内容

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

发布时间：2021-06-06 00:00| 有 位朋友查看

简介：主要使用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;}bo……

主要使用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);
}

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


原文链接：https://m.jb51.net/css/708795.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：HTML5中的websocket实现直播功能 下一篇：css3 flex布局 justify-content:space-between 最后一行左对齐

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐