CSS样式实现图片翻转后文字介绍效果

原创已于 2025-02-13 10:25:33 修改 · 452 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-10-11 15:42:28 首次发布

本文详细描述了如何使用HTML和CSS创建网页上的图片翻转效果，同时提及了2023年的特殊农历现象——双春年。通过CSS动画，当鼠标悬浮在图片上时，文字会随着图片一同翻转显示。

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);
}

视频效果链接地址

鼠标浮动到图片上翻转后显示文字效果图：