CSS 函数 - skew()_CSS 菜鸟教程

CSS 函数 skew（） 指定在 2D 平面上倾斜元素的转换，从而产生数据类型 <transform-function>。

可能的值

ax - 表示一个<angle>，它指定用于使元素沿 x 轴倾斜的角度。
ay - 表示一个<angle>，该角度指定用于沿 y 轴扭曲元素的角度。如果未指定，则默认为 0 并导致纯水平偏斜。

这种变换称为剪切映射或横流，它使元素内的点在水平和垂直方向上都偏斜。

它模拟以指定的角度拖动元素的每个角。点的坐标根据指定的角度和距原点的距离进行调整，距离较远的点受到的影响更大。

语法

skew（） 函数可能有一个或两个值来确定水平和垂直方向的偏斜程度。如果仅指定一个值，则该值将应用于 x 轴，而 y 轴不受影响。


 skew(ax) skew(ax, ay)

CSS skew（） - 仅限 X 轴

以下示例演示了如何使用 skew（） 仅在一个轴上倾斜：


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	 	 flex-direction: row;
	 	 	 justify-content: space-between;
	 	 	 align-items: center;
	 	 	 margin: 50px;
	 	}
	 	.skew-demo {
	 	 	 transform: skew(20deg);
	 	 	 background-color: #FFC107;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 font-size: 24px;
	 	 	 font-weight: bold;
	 	 	 color: #fff;
	 	}
	 	 	 .normal-demo {
	 	 	 background-color: #2196F3;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 font-size: 24px;
	 	 	 font-weight: bold;
	 	 	 color: #fff;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="skew-demo">This is div element showing Skew</div>
	 	 	 <div class="normal-demo">This is a div element showing Normal</div>
	 	</div>
</body>
</html>

CSS skew（） - 两个轴

以下示例演示了如何使用 skew（） 在两个轴上进行倾斜


<html>
<head>
<style>
	 	.container {
	 	width: 200px;
	 	height: 200px;
	 	margin-top: 40px;
	 	margin-left: 40px;
	 	background-color: #DAF7A6;
	 	transform: skew(20deg, 10deg);
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	<p>This is an example of skewing on both axes.</p>
</div>
</body>
</html>

<< CSS 函数 - matrix() CSS 函数 - skewY() >>