From b9afb23d12dcae1e09f8d04c72143c5ddaa34aea Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 16 Jul 2021 16:27:00 -0400 Subject: delete conflicting/orphaned docs (zh-CN) (#1412) * delete conflicting docs (zh-CN) * and redirects * do orphaned as well * fix * remove more orphans * revert orphaned docs that can identify origin * move orphaned docs to current loc * adjust slug path * fix redirect change from rebase Co-authored-by: Irvin --- .../css/transform-function/translatex()/index.html | 132 +++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/zh-cn/web/css/transform-function/translatex()/index.html (limited to 'files/zh-cn/web/css/transform-function/translatex()/index.html') diff --git a/files/zh-cn/web/css/transform-function/translatex()/index.html b/files/zh-cn/web/css/transform-function/translatex()/index.html new file mode 100644 index 0000000000..c800a6c7eb --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatex()/index.html @@ -0,0 +1,132 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX() +translation_of: Web/CSS/transform-function/translateX() +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +browser-compat: css.types.transform-function.translateX +--- +
{{CSSRef}}
+ +

translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。

+ +

+ +
+

注意: translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

+
+ +

语法

+ +
translateX(t)
+
+ +

参数

+ +
+
t
+
     代表了向量平移的横坐标长度{{cssxref("<length>")}}。
+
+ + + + + + + + + + + + + + + + + + + + + +
2空间中的笛卡尔坐标在ℝℙ2上的投影坐标在ℝ3上的笛卡尔坐标在ℝℙ3上的投影坐标
+

在ℝ空间中的平移并非线性变化,因此不能表示为笛卡尔坐标矩阵。

+
+

t

+ +

0

+ +

1

+
+

t

+ +

0

+ +

1

+
+

t

+ +

0

+ +

0

+ +

1

+
[1 0 0 1 t 0]
+ +

示例

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateX(10px); /* 等同于 translate(10px) */
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

标准化说明

+ + + + + + + + + + + + + + + + +
标准状态备注
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}原始定义
+ +

浏览器兼容性

+ +

请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。

+ +

参阅

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