transform:translate()方法坐标详解

定义:translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

但是如何移动呢?于是做了以下实验:

实验1.设置transform:translate(0px,0px),即延X轴和延Y轴均移动0像素,保持原有位置,做对比实验,为了方便说明,添加了坐标轴,如下所示:

实验2:设置transform:translate(10px,10px),即延X轴和延Y轴均移动10像素,对比原图位置,移动后的图如下所示,

结论:当移动的数是正数时,在Y轴方向上,相对原来的位置向下移动,在X轴方向上,相对原来的位置向右移动

实验3:设置transform:translate(-50%,-50%),即延X轴和延Y轴均移动50%,对比原图位置,移动后的图如下所示,

结论:当移动的数是负数时,在Y轴方向上,相对原来的位置向上移动,在X轴方向上,相对原来的位置向左移动

 

 

  • 46
    点赞
  • 104
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值