<div>旋轉90是一種常用的CSS技術，可以通過改變一個元素的transform屬性值來使其旋轉90度。這種旋轉效果可以用于創建獨特的動畫效果，也可以用于改變一個元素在頁面上的布局。在本文中，我將介紹幾個代碼案例，以詳細解釋如何使用<div>旋轉90來實現各種效果。</div>

，我們可以使用以下代碼將一個<div>元素旋轉90度：

\\\css
.rotate-90 {
transform: rotate(90deg);
}
\\\

上面的代碼定義了一個CSS類名為.rotate-90的樣式規則，它通過transform屬性的rotate函數將元素旋轉90度。一旦將這個類名應用到一個<div>元素上，它將會立即呈現出旋轉90度的效果。

接下來，我們可以使用這個旋轉效果來創建一個旋轉動畫。下面是一個示例代碼：

\\\css
.rotate-animation {
animation: rotate 2s linear infinite;
}
<br>
  @keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
\\\

上面的代碼定義了一個名為.rotate-animation的類，并使用animation屬性將旋轉動畫應用到元素上。這個旋轉動畫將在2秒內完成一次旋轉，使用線性的動畫過渡，并無限循環播放。關鍵幀動畫的定義部分（@keyframes）指定了動畫的起始狀態和結束狀態的transform屬性值，從而實現了90度的旋轉效果。

最后，我們可以使用<div>旋轉90來改變一個元素在頁面上的布局。下面是一個示例代碼：

\\\css
.rotate-layout {
display: flex;
flex-direction: column;
transform: rotate(90deg);
transform-origin: top left;
}
\\\

上面的代碼定義了一個名為.rotate-layout的類，并使用display: flex和flex-direction: column屬性來創建一個垂直方向的布局。然后，通過transform屬性將該元素旋轉90度，并通過transform-origin屬性將旋轉的原點設置在元素的左上角。這樣一來，這個布局的所有子元素都會按照旋轉后的方向進行排列。

總之，<div>旋轉90是一種強大的CSS技術，可以用于創建各種動畫效果和改變布局。通過transform屬性的rotate函數，我們可以將一個<div>元素旋轉指定的角度。無論是創建動畫效果，還是改變布局，<div>旋轉90都是一個非常有用的工具。