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

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

jamesge2010

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

阅读量428

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/jamesge2010/article/details/103757826

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jamesge2010

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
10-transform.html（2D变形效果）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>2D变形效果</title><style type="text/css"> #div1 { width: 200px; height: 300px; border: 1px s...
复制链接

扫一扫