CSS两面翻转效果
步骤： 1.准备3个盒子，大盒子包含2个小盒子，设置宽高；
2.给box1 box2绝对定位，子绝父相，水平居中；
3.分别给box1，box2设置不同的背景色，其中一个子盒子设置Y轴旋转180度的效果；
注意：需要设置z轴的3d位移，拉开2个子盒子的空间距离；
4.给box2的父元素，即box设置3d呈现，保持子元素的3d效果；
5.鼠标经过box的时候，整体沿Y轴旋转180度，实现翻面效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 两面翻转没有近大远小的效果，因此body里面不需要加透视perspective */
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
/* 给父级添加preserve-3d，保持子元素的3d效果 */
transform-style: preserve-3d;
transition: all 1s;
}
.box1, .box2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
line-height: 300px;
color: #fff;
}
.box1{
background-color: brown;
/* 拉开 .box1和.box2之间的z轴空间距离,没translateZ,两个面会重叠在一起 */
transform: translateZ(1px);
}
.box2{
background-color: pink;
transform: rotateY(180deg);
}
.box:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">前面</div>
<div class="box2">後面</div>
</div>
</body>
</html>
