首先使用translate来移动元素。这个行为在很多方面都与相对定位类似，在做到视觉上偏移的同时，又保持了元素在文档流中的位置。

translate在x轴或y轴上移动元素。我们可以使用像素px、em或者相对于元素的百分比来设置它的值。例如一个100px大小的元素，移动150%即为150px。百分比在流式设计或者元素大小动态改变的网站上非常有用。

我们将会使用translateX和它后面括号里的值，把Get Hardboiled网站上的名片向右移动100px。

.h-card { 
transform : translateX(100px); }

我们同样可以使用translateY把它向下移动50%。

.h-card { 
transform : translateY(50%); }

最后，把translateX和translateY组合到一句定义里。

.h-card { 
transform : translate(100px 50%); }

Anthony Calzadilla纯靠CSS3平移和旋转创作的“星球大战AT-AT步行机”。或许这个例子就是你学习CSS3的动力。

如果一个元素占据了空间，任何转换的元素都可能和它重叠。如果它在文档流里顺序比较靠后，那么它将出现在前面，反之亦然。和相对定位一样，如果我们使用了translate，那么默认文档流将保持不变，它也不占用文档流里的位置。

学习转换最好的方法就是实践。我们会用像素和百分比从不同的方向转换另一张名片。在每个例子中，虚线框表示名片的原始位置。