From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/skewx/index.html | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/zh-cn/conflicting/web/css/transform-function/skewx/index.html (limited to 'files/zh-cn/conflicting/web/css') diff --git a/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html b/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html new file mode 100644 index 0000000000..96448a9d02 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html @@ -0,0 +1,131 @@ +--- +title: skewY() +slug: conflicting/Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewY() +original_slug: Web/CSS/transform-function/skewY() +--- +
+

{{CSSRef}}

+ +

skewY() 函数定义了一个转换,该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

+ +

{{EmbedInteractiveExample("pages/css/function-skewY.html")}}

+ +

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

+
+ +

语法

+ +
skewY(a)
+
+ +

参数值

+ +
+
a
+
+ +
+
a 是一个 {{cssxref("<angle>")}},表示元素沿纵坐标扭曲的角度。
+
+ + + + + + + + + + + + + + + + + + + + + +
实坐标系 ℝ2齐次坐标系ℝℙ2实坐标系 ℝ3齐次坐标系ℝℙ3
+

1           0

+ +

tan(ax)  1

+
+

1                0     0

+ +

tan(ax)      1     0

+ +

0                 0    1 

+
+

1             0        0

+ +

tan(ax)   1        0

+ +

0              0       1

+
+

1            0  0  0

+ +

tan(ax) 1   0  0

+ +

0            0  1  0

+ +

0            0  0  1

+
[1 tan(a) 0 1 0 0]
+ +

示例

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: skewY(40deg);
+  background-color: blue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("示例","100%","250")}}

+ +

规范

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

浏览器兼容

+ +

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

+ +

另请参阅

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