From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/transform-function/skew()/index.html | 139 +++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 files/zh-cn/web/css/transform-function/skew()/index.html (limited to 'files/zh-cn/web/css/transform-function/skew()') diff --git a/files/zh-cn/web/css/transform-function/skew()/index.html b/files/zh-cn/web/css/transform-function/skew()/index.html new file mode 100644 index 0000000000..6d5f1f4bf5 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skew()/index.html @@ -0,0 +1,139 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew() +tags: + - CSS + - CSS变形 + - CSS方法 + - 引用 +translation_of: Web/CSS/transform-function/skew() +--- +
{{CSSRef}}
+ +
skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型
+ +
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
+ + + +

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

+ +

语法

+ +

 skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

+ +
skew(ax)
+
+skew(ax, ay)
+
+ +

参数值

+ +
+
ax
+
ax 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
+
ay
+
ay 是一个 {{cssxref("<angle>")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。
+
+ + + + + + + + + + + + + + + + + + + + + +
笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
+ +

示例

+ +

使用单个参数

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}

+ +

使用两个参数

+ +

HTML

+ +
<div>Normal</div>
+<div class="skewed">Skewed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Using_two_angles", 200, 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

浏览器兼容

+ +

有关兼容性信息，请参阅 <transform-function> 的数据类型。

+ +

另请参阅

+ + -- cgit v1.2.3-54-g00ecf