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表示了元素距離視圖的像素。