1、音乐盒子：触碰盒子，盖子会打开
2、百度钱包：触碰钱包，钱包，会180度旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} body {
height: 2000px;
} /*音乐盒*/
.music {
width: 200px;
height: 200px;
position: relative;
margin: 10px 0 0 200px;
} .music::before, .music::after {
content: "音乐盒";
width: 100%;
height: 100%;
font: 400 20px/200px "Microsoft YaHei";
color: yellow;
text-align: center;
border-radius: 50% 50% 50% 50%;
position: absolute;
top: 0;
left: 0;
background-color: #cccccc;
} .music::after {
content: "打开音乐盒子";
background-color: blue;
transform-origin: left;
transition: all 1s;
} .music:hover.music::after {
transform: rotateY(-180deg);
} /*百度钱包*/
.money {
width: 200px;
height: 200px;
position: relative;
margin: 10px 0 0 200px;
} .money::before, .money::after {
content: "基本没用";
width: 100%;
height: 100%;
font: 400 20px/200px "Microsoft YaHei";
color: yellow;
text-align: center;
border-radius: 50% 50% 50% 50%;
position: absolute;
top: 0;
left: 0;
background-color: #cccccc;
transition: all 1s;
/*盒子背面不可见*/
backface-visibility: hidden;
} .money::before {
transform: rotateY(-180deg);
} .money::after {
content: "百度钱包";
background-color: blue;
/*transform: translateZ(400px);*/
} .money:hover.money::before {
transform: rotateY(-360deg);
} .money:hover.money::after {
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<!--音乐盒-->
<div class="music"></div>
<!--百度钱包-->
<div class="money"></div>
</body>
</html>