CSS 函式 - rotate()

CSS 中的 rotate() 函式圍繞二維平面上的固定點旋轉元素，而不會導致任何變形。結果是 <transform-function> 資料型別。

元素旋轉圍繞的固定點也稱為 變換原點，預設為元素的中心。使用 CSS 屬性 transform-origin，可以更改和自定義變換原點。

rotate() 函式建立的元素旋轉由 <angle> 指定。如果角度值為正，則旋轉方向為順時針；如果值為負，則為逆時針。當旋轉 180 度時，稱為 點反射。

可能的值

rotate() 函式只能接受一個引數。它指定旋轉角度。

<angle>: 以度數表示。旋轉方向基於書寫方向。
- 當方向為 從左到右 上下文時，正角度使元素順時針旋轉；而負角度使元素逆時針旋轉。
- 當方向為 從右到左 上下文時，正角度使元素逆時針旋轉；而負角度使元素順時針旋轉。

語法

transform: rotate(35deg) | rotate(-35deg);

CSS rotate() - 從左到右方向旋轉

以下是用各種值（例如 deg、turn、grads）作為引數的 rotate() 函式示例，從左到右方向。

<html>
<head>
<style>
   #container {
      display: flex;
   }
   #sample-div {
      height: 100px;
      width: 100pX;
      border: 2py solid black;
      background-image: url(images/logo.png);
      margin-bottom: 2em;
   }

   section {
      padding: 25px;
      border: 2px solid red;
   }

   .rotate-positive {
      transform: rotate(45deg);
      background-image: url(images/logo.png);
   }

   .rotate-negative {
      transform: rotate(-75deg);
      background-image: url(images/logo.png);
   }

   .rotate-turn {
      transform: rotate(2.5turn);
      background-image: url(images/logo.png);
   }

   .rotate-grads {
      transform: rotate(2grads);
      background-image: url(images/logo.png);
   }
</style>
</head>
<body>
   <h1>rotate() left-to-right direction</h1>
   <div id="container">   
      <section>
         <p>no rotation</p>
         <div id="sample-div"></div>
      </section>
      <section>
         <p>rotate(45deg)</p>
         <div class="rotate-positive" id="sample-div"></div>
      </section>
      <section>
         <p>rotate(-75deg)</p>
         <div class="rotate-negative" id="sample-div"></div>
      </section>
      <section>
         <p>rotate(2.5turn)</p>
         <div class="rotate-turn" id="sample-div"></div>
      </section>
      <section>
         <p>rotate(2grads)</p>
         <div class="rotate-grads" id="sample-div"></div>
      </section>
   </div>
</body>
</html>

CSS rotate() - 從右到左方向旋轉

以下是用各種值（例如 deg、turn、grads）作為引數的 rotate() 函式示例，從右到左方向。

<html dir="rtl">
<head>
<style>
   #container {
      display: flex;
   }
   #sample-div {
      height: 100px;
      width: 100pX;
      border: 2py solid black;
      background-image: url(images/logo.png);
      margin-bottom: 2em;
   }

   section {
      padding: 25px;
      border: 2px solid red;
   }

   .rotate-positive {
      transform: rotate(45deg);
      background-image: url(images/logo.png);
   }

   .rotate-negative {
      transform: rotate(-75deg);
      background-image: url(images/logo.png);
   }

   .rotate-turn {
      transform: rotate(2.5turn);
      background-image: url(images/logo.png);
   }

   .rotate-grads {
      transform: rotate(2grads);
      background-image: url(images/logo.png);
   }
</style>
</head>
<body>
   <h1>rotate() right-to-left direction</h1>
   <div id="container">   
      <section>
         <p>no rotation</p>
         <div id="sample-div"></div>
      </section>
      <section>
         <p>rotate(45deg)</p>
         <div class="rotate-positive" id="sample-div"></div>
      </section>
      <section>
         <p>rotate(-75deg)</p>
         <div class="rotate-negative" id="sample-div"></div>
      </section>
      <section>
         <p>rotate(2.5turn)</p>
         <div class="rotate-turn" id="sample-div"></div>
      </section>
      <section>
         <p>rotate(2grads)</p>
         <div class="rotate-grads" id="sample-div"></div>
      </section>
   </div>
</body>
</html>

CSS rotate() - 將旋轉與其他變換函式結合使用

以下是用正值和負值與 translate() 函式一起使用的 rotate() 函式示例。

<html>
<head>
<style>
   div {
      position: absolute;
      left: 40px;
      top: 40px;
      width: 110px;
      height: 110px;
      background-color: lightblue;
   }

   .negative-rotate-translate {
      background-color: transparent;
      outline: 5px dotted red;
      transform: rotate(-55deg) translate(-10px);
   }

   .positive-rotate-translate {
      background-color: yellow;
      transform: rotate(35deg) translate(190px);
   }

   .positive-translate-rotate {
      background-color: green;
      transform: translate(190px) rotate(35deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="negative-rotate-translate">
      -ve rotated
   </div>
   <div class="positive-rotate-translate">
      rotate()+
      translate()
   </div>
   <div class="positive-translate-rotate">
      translate()+
      rotate()
   </div>
</body>
</html>

列印頁面