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)";
}      

来看下效果：

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

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

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

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

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

语法： ​

​perspective: number | none;​

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