CSS的div元素做旋轉

HTML結構：

<div class="rotate">

<h2>rotate</h2>

<p>This div element can be旋轉 around its center using CSS3.</p>

</div>

CSS代碼：

.rotate {

position: relative;

width: 200px;

height: 200px;

.rotate h2 {

position: absolute;

top: 50%;

left: 50%;

transform: rotate(-45deg);

width: 100px;

height: 100px;

.rotate p {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100px;

height: 100px;

運行結果：

通過上述代碼，我們可以將一個名為“rotate”的div元素旋轉45度，使其圍繞中心旋轉。旋轉后，“rotate”元素中的文本會呈現順時針旋轉的效果。

需要注意的是，在旋轉過程中，元素的父元素也會跟著旋轉，這是因為CSS的“position: relative”屬性會使得子元素相對于父元素居中。

此外，我們還可以使用“transform”屬性中的“ rotate”和“translate”函數來實現更復雜的旋轉效果。例如，我們可以將一個元素旋轉90度，并將其向上移動50像素，這樣它的父元素就會向上平移50像素，從而實現旋轉的效果。

CSS的div元素做旋轉是一種非常實用的技巧，它可以幫助我們輕松地將元素旋轉到所需的角度，從而使網頁的布局更加靈活。