应用纯CSS完成三d转动实际效果的示例编码

日期:2021-02-28 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

关键应用CSS中的 preserve⑶d 、perspective 特性完成三d实际效果

实际效果

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⑶d;
    position: relative;
}

.face{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve⑶d;
    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);
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。