共计 825 个字符，预计需要花费 3 分钟才能阅读完成。
<!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> 两面翻转的盒子 </title>
<style>
body {
/* 增加透视点 */
perspective: 400px;
/* 给父亲增加 子元素放弃 3d 成果 必写 */
transform-style: preserve-3d;
}
.box {
width: 300px;
height: 300px;
border-radius: 150px;
margin: 100px auto;
/* background-color: pink; */
position: relative;
/* 谁做过渡给谁加 */
transition: all .3s;
}
.box:hover {transform: rotateY(180deg);
}
.child {
position: absolute;
width: 100%;
height: 100%;
line-height: 300px;
text-align: center;
border-radius: 50%;
top: 0;
left: 0;
background-color: hotpink;
color: white;
font-size: 30px;
}
.negtive {transform: rotateY(180deg);
background-color: skyblue;
}</style>
</head>
<body>
<div class=”box”>
<div class="child positive"> 黑马训练营 </div>
<div class="child negtive">pink 老师等你 </div></div>
</body>
</html>
正文完
