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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_43624878/article/details/102289083

先上代码：
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');
b1.onclick=function () {
    b1.style.transform="rotateY(180deg)";
    b2.style.transform="rotateY(0deg)";
    setTimeout(function () {
            bb1.innerHTML="此牌已翻过";
    },220);
};
b2.onclick=function (){
    b2.style.transform="rotateY(-180deg)";
    b1.style.transform="rotateY(0deg)";
}

再看效果：



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

backface-visibility ——（被旋转的）元素的背面的展示状态
-webkit-perspective ——透视效果（查看一个元素的角度）

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

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

语法： perspective: number | none;
其中number表示了元素距离视图的像素。

还有一个值得一提的属性：transform: translate(-50%,-50%);
它其实是用来“ 居中 ”的，translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动。这里这个不是重点，在同专栏的另一篇文章中有提到。

完。