CSS3變形原點(diǎn)是指指定元素進(jìn)行變形時(shí)的參照點(diǎn)，通俗的講就是變形時(shí)基準(zhǔn)點(diǎn)的位置。默認(rèn)情況下，CSS3變形的原點(diǎn)是元素的中心點(diǎn)。但是通過(guò)CSS代碼，我們可以輕松地改變這個(gè)原點(diǎn)的位置，實(shí)現(xiàn)更加豐富的變形效果。

transform-origin: x y;

其中，x和y分別表示原點(diǎn)在X軸和Y軸上的位置，可以使用百分比、像素或其他單位來(lái)指定。如果只寫一個(gè)值，另一個(gè)值默認(rèn)為50%。如果寫兩個(gè)值，第一個(gè)是x軸位置，第二個(gè)是y軸位置。

舉個(gè)例子：

div {
background-color: yellow;
width: 100px;
height: 100px;
margin: 50px auto;
transform: rotate(30deg);
transform-origin: top left;
}

上面的代碼實(shí)現(xiàn)了一個(gè)黃色的正方形，元素的變形效果是旋轉(zhuǎn)30度。但是因?yàn)槟J(rèn)的原點(diǎn)是中心點(diǎn)，元素旋轉(zhuǎn)的軸心就是中心點(diǎn)，導(dǎo)致元素偏離了原來(lái)的位置。

通過(guò)添加transform-origin屬性，我們將原點(diǎn)指定為左上角，這樣元素就會(huì)繞著左上角旋轉(zhuǎn)，而不是中心點(diǎn)：

除了指定固定的原點(diǎn)位置外，還可以使用關(guān)鍵詞來(lái)指定原點(diǎn)位置：

- top - bottom - left - right - center

這些關(guān)鍵詞可以在x和y軸上各自指定一個(gè)，也可以在一個(gè)屬性值中同時(shí)指定。

總之，CSS3變形原點(diǎn)是非常有用的一個(gè)屬性，它可以提供更加豐富的變形效果，更加靈活地控制元素的動(dòng)態(tài)效果。