10-transform.html（2D变形效果）

最新推荐文章于 2022-12-27 13:13:16 发布

jamesge2010

最新推荐文章于 2022-12-27 13:13:16 发布

阅读量509

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jamesge2010/article/details/103757826

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用CSS实现的2D图片变换效果案例。当鼠标悬停在图片上时，图片将沿Y轴向下平移100像素，并伴有1秒的过渡动画。通过调整CSS属性，可以轻松创建各种2D变形效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D变形效果</title>

<style type="text/css">
	#div1 {
		width: 200px;
		height: 300px;
		border: 1px solid red;
		margin: 100px auto;
	}
	
	#div1 img {
		width: 100%;
		height: 100%;
		/* 动画时长1秒 */
		transition: all 1s;
	}
	
	#div1:hover img {
		/* 顺时针旋转45度 */
		/* transform: rotate(45deg); */
		/* 水平倾斜15度，垂直倾斜15度 */
		/* transform: skew(15deg, 15deg); */
		/* 放大两倍 */
		/* transform: scale(2); */
		/* x轴不变，y轴缩小为0.5倍 */
		/* transform: scale(1,0.5); */
		/* x轴方向偏移100px */
		/* transform: translate(100px); */
		/* y轴方向偏移100px */
		transform: translate(0, 100px);
		
	}
</style>
</head>
<body>
	<div id="div1">
		<img src="img/天空.png">
	</div>
</body>
</html>