CSS 函式 - rotateZ()

CSS 中的 rotateZ() 函式用於在三維平面上圍繞 z 軸旋轉元素，而不會導致任何變形。結果是 transform() 資料型別。

旋轉軸穿過 變換原點。使用 CSS 屬性 transform-origin，可以更改和自定義變換原點。

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

可能的值

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

<angle>：以度數表示。正角度使元素順時針旋轉；負值使元素逆時針旋轉。

語法

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

CSS rotateZ() - 值組合

以下是用各種值（如 deg、turn、grads）作為引數的 rotateZ() 函式示例。

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

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

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

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

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

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

列印頁面