<p class="zw">首先使用<code>translate</code>来移动元素。这个行为在很多方面都与相对定位类似，在做到视觉上偏移的同时，又保持了元素在文档流中的位置。</p> <p class="zw"><code>translate</code>在x轴或y轴上移动元素。我们可以使用像素<code>px</code>、<code>em</code>或者相对于元素的百分比来设置它的值。例如一个<code>100px</code>大小的元素，移动150%即为<code>150px</code>。百分比在流式设计或者元素大小动态改变的网站上非常有用。</p> <p class="zw">我们将会使用<code>translateX</code>和它后面括号里的值，把Get Hardboiled网站上的名片向右移动<code>100px</code>。</p> <pre class="代码无行号"><code>.h-card { transform : translateX(100px); }</code></pre> <p class="zw">我们同样可以使用<code>translateY</code>把它向下移动<code>50%</code>。</p> <pre class="代码无行号"><code>.h-card { transform : translateY(50%); }</code></pre> <p class="zw">最后，把<code>translateX</code>和<code>translateY</code>组合到一句定义里。</p> <pre class="代码无行号"><code>.h-card { transform : translate(100px 50%); }</code></pre> <p class="图"><img alt="1801.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/219.jpg"></p> <p class="图题">Anthony Calzadilla纯靠CSS3平移和旋转创作的“星球大战AT-AT步行机”。或许这个例子就是你学习CSS3的动力。</p> <p class="zw">如果一个元素占据了空间，任何转换的元素都可能和它重叠。如果它在文档流里顺序比较靠后，那么它将出现在前面，反之亦然。和相对定位一样，如果我们使用了<code>translate</code>，那么默认文档流将保持不变，它也不占用文档流里的位置。</p> <p class="zw">学习转换最好的方法就是实践。我们会用像素和百分比从不同的方向转换另一张名片。在每个例子中，虚线框表示名片的原始位置。</p> <p class="图"><img alt="1802.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/220.jpg"></p>
