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
0- 0
已为社区贡献1条内容
所有评论(0)