CSS 函数 - rotateX()

CSS 中的 rotateX() 函数用于围绕二维平面上的 x 轴（水平）旋转元素。结果是<transform-function> 数据类型。

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

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

可能的值

rotateX() 函数只能接受一个参数。它指定旋转角度。

<angle>：以度为单位表示。正角度使元素顺时针旋转；负值使元素逆时针旋转。

语法

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS rotateX() - 值组合

以下是带有不同值（例如deg、turn、grads）作为参数的 rotateX() 函数示例。

Open Compiler

<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-x-positive {
      transform: rotateX(45deg);
      background-image: url('images/logo.png');
   }

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

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

   .rotate-x-grads {
      transform: rotateX(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>rotateX(45deg)</p>
         <div class="rotate-x-positive" id="sample-div"></div>
      </section>
      <section>
         <p>rotateX(-75deg)</p>
         <div class="rotate-x-negative" id="sample-div"></div>
      </section>
      <section>
         <p>rotateX(2.5turn)</p>
         <div class="rotate-x-turn" id="sample-div"></div>
      </section>
      <section>
         <p>rotateX(2grads)</p>
         <div class="rotate-x-grads" id="sample-div"></div>
      </section>
   </div>
</body>
</html>

打印页面