CSS3動畫原點也稱為transform-origin，它指定了元素變換的基準點。默認情況下，動畫變換的中心點是元素的中心。但是你也可以更改這個原點來實現不同的效果。

transform-origin: x-axis y-axis z-axis;

其中x、y和z是指定原點的值?？赡艿闹涤衛eft、center、right、top、bottom和百分比。

使用百分比指定x和y的值對于實現特定效果非常有用。例如，以下代碼將元素旋轉45度，并以中心為原點進行旋轉。

div {
transform: rotate(45deg);
transform-origin: 50% 50%;
}

如果您將原點從中心移動，您可以創建不同的旋轉效果。以下代碼將元素繞左下角以45度旋轉。

div {
transform: rotate(45deg);
transform-origin: left bottom;
}

另一個有趣的效果是讓元素以左下角為原點，繞右上角旋轉。代碼如下：

div {
transform: rotate(45deg);
transform-origin: left bottom;
transform-box: fill-box;
transform-origin: 100% 0%;
}

transform-box屬性指定了元素變換所使用的盒模型。fill-box模型以元素邊框框架為基礎進行變換。

CSS3動畫原點讓我們能夠實現更加復雜的動畫效果。它是CSS3動畫的重要組成部分，無論是初學者還是專業開發人員都應該加以學習。