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);
}
视频效果链接地址
鼠标浮动到图片上翻转后显示文字 效果图: