CSS旋轉可以讓元素以不同的角度顯示，但這樣做可能會影響到排列。下面我們來看看旋轉后如何排列。

.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}

上面的代碼可以讓.box元素以45度的角度旋轉。但這樣的話，它的位置就會發生跳躍，因為在旋轉前它的邊緣和旋轉后的不同。

.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
transform-origin: top left;
}

為了讓.box元素旋轉時保持位置不變，我們需要使用transform-origin屬性。該屬性可以指定旋轉的中心點，使元素以這個點為基準進行旋轉，旋轉后的位置就不會改變。

.box1 {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
transform-origin: top left;
margin-right: 20px;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(-45deg);
transform-origin: top right;
}

如果我們在同一行內同時放置多個旋轉的元素，它們也需要設置transform-origin屬性來避免位置發生跳躍。另外，我們還需要注意它們的旋轉方向，如上面的.box1和.box2就是沿著不同的方向旋轉的。