css翻转动画案例
2021-09-13 本文已影响0人
键盘已附魔
GIF 2021-9-12 星期日 22-22-37.gif
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all 1s;
/* 让对面的盒子保留3d空间 */
transform-style: preserve-3d;
}
.box:hover {
/* 鼠标经过盒子就翻转 */
transform: rotateY(180deg);
}
.yes,
.no {
/* 定位 */
position: absolute;
top: 0;
left: 0;
/* 宽高 */
width: 300px;
height: 300px;
/* 圆形 */
border-radius: 50%;
/* 字体 */
font-size: 100px;
line-height: 300px;
text-align: center;
}
.yes {
background-color: #0f0;
/* 到前面来 */
z-index: 1;
}
.no {
background-color: #f00;
/* 后面的一面先翻过去 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="yes">YES!</div>
<div class="no">NO!</div>
</div>
</body>
