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轴方向上,相对原来的位置向左移动。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)