HTML代码部分
<body>
<div class="container">
<div class="item">
<div class="img"></div>
<div class="text">
2023年，公历平年，共365天，52周零一天。全年为壬寅年腊月初十～癸卯年十一月十九。1月1日～1月21日为壬寅年（虎年）；1月22日～12月31日为癸卯年（兔年），闰二月（小），共384天。由于该年闰月，所以在农历的1年里有2个立春，故称为双春年。
</div>
</div>
</div>
</body>CSS样式部分：
* {
margin: 0;
padding: 0;
}
.container {
width: 70%;
height: 500px;
margin: 0 auto;
}
.item{
position: relative;
}
.img,.text{
width: 262px;
height: 332px;
position: absolute;
top: 0;
transition: all 3s;
}
.item .img{
background: url(./img/tuzi.webp) no-repeat;
background-size: cover;
transform: rotateY(0);
border: 1px solid gray;
box-sizing: border-box;
/* rotate,rotateX, rotateY deg */
}
.item .text{
background-color: gainsboro;
transform: rotateY(-180deg);
backface-visibility: hidden;
padding: 10px;
box-sizing: border-box;
line-height: 30px;
}
.item:hover .img{
transform: rotateY(180deg);
}
.item:hover .text{
transform: rotateY(0);
}视频效果链接地址
鼠标浮动到图片上翻转后显示文字 效果图：
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
