CSS的变形transform样式扭曲

使用 CSS3 transform 属性，你可以给任何元素加上“变形
transform 属性设置属性值 skew 为进行元素扭曲，其值为deg(度数),可以单独设置x轴skewX,可以单独设置y轴skewY

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.sky{
				width: 200px;
				height: 200px;
				color: chartreuse;
				background: skyblue;
				transition: 1s;
			}
			.sky:hover{
				transform: skew(30deg,30deg);
			}
		</style>
	</head>
	<body>
		<div class="sky">
		</div>
	</body>
</html>

transform: skew(30deg,30deg);第一个值是X轴，第二个值是Y轴
也可以单独设置X轴transform: skewX(30deg);
也可以单独设置Y轴transform: skewY(30deg);

posted @ 2025-01-27 08:00  觉远  阅读(42)  评论(0)    收藏  举报