rotateY()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis â¨juillet 2015â©.
La fonction CSS rotateY() définit une transformation qui fait pivoter un élément autour de l'axe y (vertical) sans le déformer. Son résultat est un type de donnée <transform-function>.
Exemple interactif
transform: rotateY(0);
transform: rotateY(45deg);
transform: rotateY(-0.2turn);
transform: rotateY(3.142rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
L'axe de rotation passe par une origine, définie par la propriété CSS transform-origin.
Note :
rotateY(a) est équivalent Ã
rotate3d(0, 1, 0, a).
Note : Contrairement aux rotations dans le plan 2D, la composition des rotations 3D n'est généralement pas commutative. Autrement dit, l'ordre dans lequel les rotations sont appliquées a un impact sur le résultat.
Syntaxe
rotateY(a)
Valeurs
a-
Un
<angle>représentant l'angle de la rotation. Un angle positif indique une rotation dans le sens horaire, un angle négatif dans le sens antihoraire.
| Coordonnées cartésiennes sur â^2 (angl.) | Coordonnées homogènes sur ââ^2 | Coordonnées cartésiennes sur â^3 (angl.) | Coordonnées homogènes sur ââ^3 (angl.) |
|---|---|---|---|
| Cette transformation s'applique à l'espace 3D et ne peut pas être représentée sur le plan. |
|
|
|
Syntaxe formelle
<rotateY()> =
rotateY( [ <angle> | <zero> ] )
Exemples
HTML
<div>Normal</div>
<div class="rotated">Tourné</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotateY(60deg);
background-color: pink;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-rotatey |
Compatibilité des navigateurs
Voir aussi
- La propriété
transform - La propriété
rotate - Le type de donnée
<transform-function>