rotateY()

rotateY()

该rotateY() CSS功能定义了围绕元素的纵坐标（垂直轴）旋转元素而不会使该元素变形的变换。其结果是一个<transform-function>数据类型。

旋转轴通过由transform-originCSS属性定义的原点。

注： rotateY(a)相当于rotate3d(0, 1, 0, a)。

注意：与2D平面中的旋转不同，3D旋转的组成通常是不可交换的。换句话说，旋转的顺序影响结果。

语法

rotateY()创建的旋转量由一个<angle>指定。如果该值是正的，运动将是顺时针的; 如果是负值，则会逆时针旋转。

rotateY(a)

可能值

a是代表旋转的角度<angle>。正角度表示顺<angle>时针旋转，负角度表示逆时针旋转。

实例

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateY(60deg
  background-color: pink;
}

结果

另见

• transform

• <transform-function>