css3硬币翻转
程序员文章站
2024-03-22 08:02:03
...
css3硬币翻转
思路：
1.准备一个父盒子、子盒子1、子盒子2，盒子2通过定位和盒子1重合（此时盒子2在上面）。
2.盒子2设置3d翻转(绕y轴)，从0deg到180deg。
3.将盒子2翻转180度后隐藏，此时要用到backface-visibility: hidden;。
4.处理盒子1：盒子1一开始就设置旋转到180deg的状态，鼠标经过后从180deg到0deg。
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>硬币翻转</title>
<style>
.box {
position: relative;
width: 250px;
height: 250px;
margin: 100px;
border-radius: 50%;
}
.box1 {
width: 250px;
height: 250px;
background-color: pink;
font-size: 30px;
text-align: center;
line-height: 250px;
border-radius: 50%;
transform: rotateY(180deg);
transition: all 2s linear;
}
.box2 {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 250px;
background-color: purple;
font-size: 30px;
text-align: center;
line-height: 250px;
border-radius: 50%;
transition: all 2s linear;
backface-visibility: hidden;
}
.box:hover .box2 {
transform: rotate3d(0, 1, 0, 180deg);
}
.box:hover .box1 {
transform: rotate3d(0, 1, 0, 0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">反面</div>
<div class="box2">正面</div>
</div>
</body>
</html>
上一篇： 1073 多选题常见计分法
下一篇： kaggle示例1—研究生录取判断问题