纯css实现网页元素两面翻转效果。鼠标经过盒子，盒子两面翻转效果
本帖最后由 wushaominkk 于 2022-3-16 08:42 编辑以下是css的源码
* {
padding: 0;
margin: 0;
}
body {
perspective: 300px;
}
.box {
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
transition: all 0.4s;
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
.front {
background-color: pink;
z-index: 1;
transform: translateZ(1px);
}
.back {
background-color: aqua;
transform: rotateY(180deg);
}
.box:hover {
transform: rotateY(180deg);
}
以下是html中的源码
<div class="box">
<div class="front">我是刘德华</div>
<div class="back">我很帅</div>
</div> 有点意思，效果是中间一个圆，正反两面可以翻转
页:
[1]