rotateY() - CSS（层叠样式表）编辑

rotateY() 函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。它的结果是一个<transform-function> 数据类型。

旋转轴围绕原点旋转，而这个原点通过transform-origin 属性来定义。

注意: rotateY(a) 相当于 rotate3d(0, 1, 0, a).

注意: 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。

语法

rotateY() 引起的旋转量由<angle>指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

rotateY(a)

笛卡儿坐标 ℝ²	齐次坐标 ℝℙ²	笛卡儿坐标 ℝ³	齐次坐标 ℝℙ³
This transformation applies to the 3D space and can't be represented on the plane.		$(\begin{matrix} cos(a) & 0 & sin(a) \\ 0 & 1 & 0 \\ -sin(a) & 0 & cos(a) \end{matrix})$	$(\begin{matrix} cos(a) & 0 & sin(a) & 0 \\ 0 & 1 & 0 & 0 \\ -sin(a) & 0 & cos(a) & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

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

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

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

Specification	Status	Comment
CSS Transforms Level 2 rotateY()	Editor's Draft	Initial definition

有关兼容性信息，请参阅 <transform-function> 的数据类型。

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

浏览：99 次

字数：5842

最后编辑：7 年前

编辑次数：0 次