关于css:两面翻转的盒子

<!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>

<div class="child positive"> 黑马训练营 </div>
<div class="child negtive">pink 老师等你 </div>

</div>
</body>

</html>