HTML5中的伪类选择器实现一张图片翻转特效

最新推荐文章于 2024-07-16 21:31:13 发布

wotu__

最新推荐文章于 2024-07-16 21:31:13 发布

阅读量1.6k

点赞数 2

分类专栏： HTML5 文章标签： HTML5 过渡 2D转换模块

本文链接：https://blog.csdn.net/hudaJY/article/details/80517568

版权

本文介绍了如何使用HTML5的伪类选择器和2D转换模块来创建图片翻转特效。当鼠标悬停在图片上时，图片会沿着下边界旋转90度。关键代码包括应用`hover`伪类选择器、设置过渡效果以及利用`transform`进行旋转，并通过`transform-origin`指定旋转中心。

摘要由CSDN通过智能技术生成

效果示意图

图中，我实现的效果是当鼠标悬停在图片上面时，图片将围绕下边界旋转90度

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 350px;
				margin: 0 auto;
				/*设置盒子居中显示*/
				background-color: skyblue;
				padding-top: 150px;
				/*内边距 (div标签)*/
				/*border: 1px solid black;*/
				text-align: center;
				perspective: 350px;
			}
			div img{
				transition: all 3s;
				transform-origin: bottom;
			}
			div img:hover{
				transform:rotateX(90deg) ;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/angel2.jpeg" width="250px" height="350px"/>
		</div>
	</body>
&l