CSS 数据类型

CSS中的rotateZ()函数用于在三维平面上绕z轴旋转元素而不引起任何变形。结果是 transform() 数据类型。

旋转轴穿过变换原点。使用 CSS 属性 transform-origin，可以更改和自定义变换原点。

元素的旋转由rotateZ() 函数创建的，内容由<angle> 指定。如果角度值为正，则旋转运动为顺时针；如果值为负，则旋转运动为逆时针。

属性值

函数rotateZ()只有一个参数。它指定旋转角度。

  • <angle>:以度数表示。正角度沿顺时针方向旋转元素；而负值则逆时针旋转。

语法

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

CSSrotateZ(): 值组合

以下是一个以各种值作为参数的rotateZ()函数的示例，例如deg、turn、grads:

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

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

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

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

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

   .rotate-z-grads {
      transform: rotateZ(2grads);
      background-image: url('/css/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>