HTML转换

w2177293478

于 2025-05-22 15:34:04 发布

阅读量109

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/w2177293478/article/details/148142750

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换</title>
		<style>
			.box{
				width: 300px;
				height: 150px;
				background-color: pink;
				margin: 300px auto; 
			}
			.box:hover{
				/*转换：transform
				1.位移：translate:x轴位移，y轴位移
				  正数：从左到右/从上到下
				  负数：从右到左/从下到上
				2.缩放scale(倍数)
				    放到：倍数>1
					缩小:0<倍数<1
				3.旋转rotate(deg度)
				  正数：顺时针旋转
				  负数：逆时针旋转
				4.倾斜skew(deg度)
				
					transform: : translate(100px,-200px);*/
				/*transform: scale(0.5,2);*/
				transform: rotate(-145deg);
				/*transform: skew(-45deg);*/
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>