CSS 函数 - rotateY()



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

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

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

可能的值

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

  • <angle>:以度数表示。正角度使元素顺时针旋转;负值使元素逆时针旋转。

语法

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS rotateY() - 值组合

以下是用正负角度作为参数的 rotateY() 函数示例

Open Compiler
<html> <head> <style> #container { display: flex; } #sample-div { height: 100px; width: 100pX; border: 2py solid black; background-image: url('images/logo.png'); margin-bottom: 2em; } section { padding: 25px; border: 2px solid red; } .rotate-y-positive { transform: rotateY(45deg); background-image: url('images/logo.png'); } .rotate-y-negative { transform: rotateY(-75deg); background-image: url('images/logo.png'); } .rotate-y-turn { transform: rotateY(2.5turn); background-image: url('images/logo.png'); } .rotate-y-grads { transform: rotateY(2grads); background-image: url('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>
广告