CSS 数据类型

CSS中的rotateY()函数用于在二维表面上绕y轴（垂直）旋转元素。结果是 <transform-function> 数据类型。

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

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

可能的值

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

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

语法

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

    CSSrotateY() : 值的组合

    以下是一个以正角度和负角度作为参数的rotateY()函数的示例:

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

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

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

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