css3属性transform之translate

SupAack

于 2020-02-25 16:29:53 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/SupAack/article/details/104499352

本文深入解析CSS中的transform属性，特别是translateX与translateY的使用技巧。通过实例展示如何沿X轴和Y轴进行元素的平移操作，同时强调了平移操作不会改变元素的原有布局位置，适合前端开发者学习。

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

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（默认向下值为负数则向上） */