backface-visibility制作翻牌效果

今天案例的灵感来自于下图：

这次没有仿着做这个案例，我只是做了一下翻牌效果，成品如下

html代码

<section>
        <div>正面</div>
        <div>反面</div>
</section>

css样式

backface-visibility不能放在div:nth-child(2)反面中，需放在div中，不然转的时候会看到正面

div:nth-child(1){
    background:pink;
}
div:nth-child(2){
    background: orange;
    transform:rotateY(180deg);
}
section:hover div:nth-child(1){
    transform:rotateY(360deg);
}
section:hover div:nth-child(2){
    transform:rotateY(360deg);
}

转载于:https://www.cnblogs.com/web-learning/p/10292399.html