天天看点

CSS是如何实现卡片3D翻转效果的

先上代码:

HTML

<div class="main">
    <div class="box b1">
        <p>你就是云风清吗?</p>
    </div>
    <div class="box b2">
        <p>我是云风清</p>
    </div>
</div>      

css

.main{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 300px;
        transform: translate(-50%,-50%);
        -webkit-perspective: 1500px;
        -moz-perspective: 1500px;
    }
    .box{
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        transition: all 1s;
        backface-visibility: hidden;
        border-radius: 10px;
        cursor: pointer;
    }
    .box p{
        text-align: center;
        line-height: 300px;
        color: white;
    }
    .b1{
        background: skyblue;
    }
    .b2{
        background: tomato;
        transform: rotateY(-180deg);
    }      

JS

var b1=document.querySelector('.b1');
var bb1=document.querySelector('.box.b1 p');
var b2=document.querySelector('.b2');
//节流
var mxc=true
b1.onclick=function () {
    if(!mxc){
        return;
    }
    mxc=false;
    setTimeout(function () {
        mxc=true;
        b1.style.transform="rotateY(180deg)";
        b2.style.transform="rotateY(0deg)";
    },320);
};
b2.onclick=function (){
    b2.style.transform="rotateY(-180deg)";
    b1.style.transform="rotateY(0deg)";
}      

来看下效果:

CSS是如何实现卡片3D翻转效果的

最后,其中涉及的很多重要知识点,有必要在这里提一下:

backface-visibility ——(被旋转的)元素的背面的展示状态

-webkit-perspective ——透视效果(查看一个元素的角度)

提一下第2个:前面加 -webkit ,是浏览器版本号——浏览器兼容写法。一般情况下肯定不止一行,比如这个,又加了一个:-moz-perspective

菜鸟教程 上是这样描述的:perspective只影响3D转换元素,定义谁的perspective属性,它只是一个元素的子元素、透视图,而不是元素本身。

语法: ​

​perspective: number | none;​

​ 其中number表示了元素距离视图的像素。