rotateY()
Baseline 2022
Newly available
Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
rotateY()
函数定义了一个转换,它可以让一个元素围绕纵坐标 (垂直轴) 旋转,而不会对其进行变形。它的结果是一个<transform-function>
数据类型。
尝试一下
旋转轴围绕原点旋转,而这个原点通过transform-origin
属性来定义。
备注: rotateY(a)
相当于 rotate3d(0, 1, 0, a)
.
备注: 与二维平面上的旋转不同,三维旋转的组合顺序通常是不可交换的。换句话说,三维旋转的应用顺序,将会影响最终结果。
语法
rotateY()
引起的旋转量由<angle>
指定。如果为正,则顺时针方向移动;如果为负,则逆时针方向移动。
rotateY(a)
参数值
示例
HTML
html
<div>Normal</div>
<div class="rotated">Rotated</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotateY(60deg);
background-color: pink;
}
结果
规范
Specification |
---|
CSS Transforms Module Level 2 # funcdef-rotatey |
浏览器兼容性
BCD tables only load in the browser