css3属性transform之translate

CSS transform属性详解

最新推荐文章于 2025-10-07 21:43:58 发布

原创最新推荐文章于 2025-10-07 21:43:58 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

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

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