CSS 数据类型

CSS中的rotate()函数使元素围绕二维表面上的固定点旋转，而不会造成任何变形。结果是 <transform-function> 数据类型。

元素围绕其旋转的固定点也称为变换原点，默认为元素的中心。使用 CSS 属性 transform-origin，可以更改和自定义变换原点。

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

可能的值

函数rotate()只能采用一个参数。它指定旋转角度。

  • <angle>:以度数表示。旋转方向基于书写方向。

    • 当方向为从左到右上下文时，正角度沿顺时针方向旋转元素；

    • 当方向是从右到左上下文时，正角度将逆时针方向旋转元素；反之，负角度将逆时针方向旋转元素。而负角度则按顺时针方向旋转。

语法

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

    CSSrotate(): 从左到右方向旋转

    以下是从左到右方向以各种值作为参数的rotate()函数的示例，例如deg、turn、grads:

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

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

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

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

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

   .rotate-grads {
      transform: rotate(2grads);
      background-image: url(/css/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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    CSSrotate(): 从右到左方向旋转

    以下是一个以各种值作为参数的rotate()函数的示例，例如deg、turn、grads，在右侧-向左方向:

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

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

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

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

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

   .rotate-grads {
      transform: rotate(2grads);
      background-image: url(/css/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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    CSSrotate(): 将旋转与其他转换函数结合

    以下是与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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43