rotate
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis août 2022.
La propriété CSS rotate vous permet de définir des transformations de rotation individuellement et indépendamment de la propriété transform. Cela correspond mieux à l'utilisation typique de l'interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformation à spécifier dans la propriété transform.
Exemple interactif
rotate: none;
rotate: -45deg;
rotate: z 45deg;
rotate: x 45deg;
rotate: y 45deg;
rotate: 3 0.5 2 45deg;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 550px;
}
#example-element {
width: 100px;
height: 100px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
Syntaxe
/* Valeurs avec un mot-clé */
rotate: none;
/* Valeur angulaire */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;
/* Un axe x, y, z et l'angle associé */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;
/* Un vector et l'angle associé */
rotate: 1 1 1 90deg;
/* Valeurs globales */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;
Valeurs
- Valeur angulaire
-
Un angle (
<angle>) définissant l'angle de rotation de l'élément affecté autour de l'axe Z. Équivalent à une fonctionrotate()(rotation 2D). - Nom de l'axe x, y ou z plus valeur angulaire
-
Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (
x,youz), plus un angle (<angle>) définissant l'angle de rotation de l'élément affecté autour de cet axe. Équivalent à une fonctionrotateX()/rotateY()/rotateZ()(rotation 3D). - Vecteur plus valeur angulaire
-
Trois nombres (valeurs
<number>) représentant un vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément, plus un angle (<angle>) définissant l'angle de rotation de l'élément affecté autour de ce vecteur. Équivalent à une fonctionrotate3d()(rotation 3D). none-
Définit qu'aucune rotation ne doit être appliquée.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | une transformation |
| Crée un contexte d'empilement | oui |
Syntaxe formelle
rotate =
none |
<angle> |
[ x | y | z | <number>{3} ] && <angle>
Exemples
Rotation d'un élément au survol
L'exemple suivant montre comment utiliser la propriété rotate pour faire pivoter un élément autour de différents axes au survol.
La première boîte pivote de 90 degrés sur l'axe Z au survol, la deuxième pivote de 180 degrés sur l'axe Y au survol, et la troisième pivote de 360 degrés au survol autour d'un vecteur défini par des coordonnées.
HTML
<div class="box" id="box1">rotation en Z</div>
<div class="box" id="box2">rotation en Y</div>
<div class="box" id="box3">vecteur et angle</div>
CSS
.box {
display: inline-block;
margin: 1em;
min-width: 6.5em;
line-height: 6.5em;
text-align: center;
transition: 1s ease-in-out;
border: 0.25em dotted;
}
#box1:hover {
rotate: 90deg;
}
#box2:hover {
rotate: y 180deg;
}
#box3:hover {
rotate: 1 2 1 360deg;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Transforms Module Level 2 # individual-transforms |
Compatibilité des navigateurs
Voir aussi
Note : skew n'est pas une valeur de transformation indépendante