rotate
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since août 2022.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété rotate permet d'indiquer des rotations individuellement et indépendamment de la propriété transform. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour transform.
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
- Valeur angulaire
-
Une valeur
<angle>qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonctionrotate(). - Le nom de l'axe et l'angle associé
-
Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (
"x", "y" ou "z"), puis une valeur<angle>qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctionsrotateX()/rotateY()/rotateZ(). - Un vecteur et l'angle associé
-
Trois nombres (valeurs
<number>) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur<angle>qui indique l'angle de rotation. Cela est équivalent à la fonctionrotate3d(). none-
Cette valeur indique qu'aucune rotation ne devrait être appliquée.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | une transformation |
| Crée un contexte d'empilement | oui |
Syntaxe formelle
rotate =
none |
<angle> |
[ x | y | z | <number>{3} ] && <angle>
Exemples
HTML
<div>
<p class="rotate">Rotation</p>
</div>
CSS
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
div {
width: 150px;
margin: 0 auto;
}
p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
}
.rotate {
transition: rotate 1s;
}
div:hover .rotate {
rotate: 1 -0.5 1 180deg;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 2 # individual-transforms |
Compatibilité des navigateurs
Loading…