<p class="zw">移动、缩放、旋转和扭曲是控制设计细节的强大工具。我们还可以更进一步，为任何给定元素设置转换的原点。</p> <p class="zw">通过使用关键字<code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code>和<code>center</code>，或者使用像素<code>px</code>、<code>em</code>和百分比来定义<code>transform-origin</code>。原点包含水平和垂直两个值。在下面这个例子中，我们将卡片的原点设置为右上角。</p> <pre class="代码无行号"><code>.h-card { transform-origin : right top; }</code></pre> <p class="zw">使用百分比也会得到相同的结果。</p> <pre class="代码无行号"><code>.h-card { transform-origin : 100% 0; }</code></pre> <p class="zw">当我们只设置一个值时，浏览器会默认第二个值为<code>center</code>。</p> <p class="zw">实践依然是我们理解转换原点最好的方法，所以在下一组例子中，我们会演示一张卡片不同的转换原点，并且逆时针旋转30度。没错，虚线框依然表示卡片的初始位置。</p> <p class="图"><img alt="1807.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/225.jpg"></p>
