该文章演示了如何通过CSS中的backface-visibility属性和3D变换来创建一个翻转盒子效果。在一个父级div中，有两个子div分别作为盒子的正面和背面，设置相应的CSS样式，包括过渡效果和旋转角度，实现了鼠标悬停时盒子从正面翻转到背面的动画效果。
实现的盒子效果如下----->
主要是使用背面隐藏(backface-visibility: hidden;) 实现图片的两面翻转
创建一个父盒子，里面有两个子盒子：
<body>
<div class="box">
<div class="front">张世杰</div>
<div class="back">在3G等你</div>
</div>
</body>再用css修饰：
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all 1s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.box:hover {
transform: rotateY(180deg);
}
.front,.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
transform: rotateY(180deg);
}
</style>
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
