首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

translateX()

translateX() CSS函数在2D平面中水平方向上重新定位元素。

注意: translateX(tx)相当于translate(tx, 0)translate3d(tx, 0, 0)

语法

代码语言:javascript
复制
translateX(t)

可能值

t是表示平移向量的横坐标的<length>值。

Cartesian coordinates on ?2

Homogeneous coordinates on ??2

Cartesian coordinates on ?3

Homogeneous coordinates on ??3

A translation is not a linear transform in ?2 and cannot be represented using a matrix in the Cartesian coordinate system.

10t010001

10t010001

100t010000100001

| 1 0 0 1 t 0 |

实例

HTML

代码语言:javascript
复制
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

代码语言:javascript
复制
div { 
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px);
  background-color: pink;
}

结果

另见

  • transform
  • <transform-function>

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com