CSS3-转换之translate

本文详细介绍了CSS中translate变换的四种形式,包括X轴、Y轴、Z轴及3D变换的具体应用,并通过示例图帮助理解元素在不同轴上的移动效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在讲解之前,我们先将我们要变换的元素看做一个正方体,为了方便理解,我标注了XYZ轴以及方向,如下图:
这里写图片描述
translate有四种情况,如下:

1、translateX(x)

定义X轴转换,即仅在水平方向移动,正值向右移动,负值向左移动,原理如下图:
这里写图片描述
元素向右移动了30px,俯视图如上图。

2、translateY(y)

定义Y轴转换,即仅在垂直方向移动,也就是上面正方体的前后移动,正值垂直方向向下,负值垂直方向向上,原理如下图:
这里写图片描述
元素向下移动了30px,原理如上图。

3、translate(x,y)

定义2D转换,即水平方向和垂直方向同时移动,原理如下图:
这里写图片描述
上图为正方体俯视图,元素分别向右、向前移动了30px。

4、translateZ(z)

定义Z轴转换,即仅在Z轴方向移动,原理如下图:
这里写图片描述
从上图看,并没有任何变化,但实际元素向上移动30px,因为是俯视,z轴移动的变化看不出来,所以看上去向无变化。

5、translate3d(x,y,z)

定义3D转换,原理如下图:
这里写图片描述
元素分别向右、向前、向上移动30px,同样俯视Z轴变化只是上下变化,俯视图看上去无变化。

上面正方体主要是用来理解3D变换的,如有不恰当的地方,还望导游指教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值