用纯CSS能做元素3D旋转的效果吗-群英

上一篇：CSS的结构伪类选择器用于什么，用法是怎样下一篇：CSS3中有哪些新加的背景属性，怎么使用

这篇文章主要介绍了用纯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);
}

到此这篇关于“用纯CSS能做元素3D旋转的效果吗”的文章就介绍到这了,更多相关用纯CSS能做元素3D旋转的效果吗内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

标签： 3D旋转

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS的结构伪类选择器用于什么，用法是怎样下一篇：CSS3中有哪些新加的背景属性，怎么使用