移动、缩放、旋转和扭曲是控制设计细节的强大工具。我们还可以更进一步，为任何给定元素设置转换的原点。

通过使用关键字top、right、bottom、left和center，或者使用像素px、em和百分比来定义transform-origin。原点包含水平和垂直两个值。在下面这个例子中，我们将卡片的原点设置为右上角。

.h-card { 
transform-origin : right top; }

使用百分比也会得到相同的结果。

.h-card { 
transform-origin : 100% 0; }

当我们只设置一个值时，浏览器会默认第二个值为center。

实践依然是我们理解转换原点最好的方法，所以在下一组例子中，我们会演示一张卡片不同的转换原点，并且逆时针旋转30度。没错，虚线框依然表示卡片的初始位置。