css3属性transform之translate

translateY & translateX 偏移

transform:translate(60px); /* 沿X轴偏移60px(默认向右值为负数则向左) */
transform:translateY(60px) /* 沿X轴偏移60px */
transform:translateX(60px) /* 沿Y轴偏移60px */
transform:translateX(60px) translateY(60px);
transform:translate(60px,30px); /* 沿X轴偏移60px(默认向右值为负数则向左) 沿Y轴偏移30px(默认向下值为负数则向上) */

在这里插入图片描述

偏移不改变原有位置

未加 transform 之前,将两个div至于同一位置

在这里插入图片描述
在这里插入图片描述

给box2加 transform 则box2偏移

在这里插入图片描述
在这里插入图片描述

发布了9 篇原创文章 · 获赞 17 · 访问量 1362

猜你喜欢

转载自blog.csdn.net/SupAack/article/details/104499352