css3中translateY、translateX的使用

1.先说一下translateY()的用法
css3中translateY、translateX的使用
效果:
css3中translateY、translateX的使用
2.再说一下translateX()的用法
css3中translateY、translateX的使用
效果图:
css3中translateY、translateX的使用
3.最后再说一下translate(x轴,y轴)的使用;
css3中translateY、translateX的使用
效果图:
css3中translateY、translateX的使用
margin后面一般会跟4个参数,如margin:1px、1px、1px、1px,分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。

如果后面只写2个参数的话,如margin:1px、2px,则表示上下外边距为都为1px,左右外边距都为2px。

再看一个例子
css3中translateY、translateX的使用
此时的效果:
疑问:为什么box2的起点x,y是(0,100),而不是0,0?
答:因为在布局里面,box在box2的前面,而box的宽高都是100px,虽然在“.box”样式里面写了transform:translate(150px,150px),但是这个平移操作不会改变文档流(解释:也就是对box2进行布局的时候,还是把box的位置当成未平移之前的位置),所以box2的起点就是x,y(0,100)紧接在未平移之前的box后面css3中translateY、translateX的使用css3中translateY、translateX的使用