css3 之倾斜属性skew()

最新推荐文章于 2025-05-22 10:07:31 发布

suosuo37

最新推荐文章于 2025-05-22 10:07:31 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/suosuo37/article/details/83834344

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS中skew变换函数的使用方法，包括如何通过xdeg和ydeg参数控制元素的横向和纵向倾斜角度，实现动态视觉效果。通过具体代码示例，展示了在:hover伪类下应用skew变换，使网页元素在鼠标悬停时产生倾斜动画，增强用户交互体验。

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

1、skew(xdeg)
向横向倾斜指定度数
x取值为正，X轴不动，y轴逆时针倾斜一定角度
x取值为负，X轴不动，y轴顺时针倾斜一定角度
skew(30deg)

2、skew(xdeg,ydeg)
ydeg : 纵向倾斜度数
y取值为正，y轴不动,x轴顺时针倾斜一定角度
y取值为负，y轴不动,x轴逆时针倾斜一定角度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2:hover
{
	transform:skew(30deg,20deg);
	-ms-transform:skew(30deg,20deg); /* IE 9 */
	-webkit-transform:skew(30deg,-30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>