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