translateX et translateY sur le même élément?
Est-il possible d'appliquer un CC traduire X et Y sur le même élément?
Si j'essaie ce la translateX est remplacé par le translateY:
.something {
transform: translateX(-50%);
transform: translateY(-50%);
}
- double possible de Comment appliquer plusieurs transforme en CSS3?
- Je comprends que c'est une démo, mais juste rememeber inclure navigateur préfixant ainsi
- Pas un doublon, c'est en fait différent.
- N'est-ce pas? Ne serait pas
.something { transform: translateX(-50%) translateY(-50%); }
être une solution? - Il le ferait, mais la vraie réponse, c'est l'existence de la
translate
propriété qui englobe les deux axes, supprimant ainsi la nécessité d'un double propriétés.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire quelque chose comme ceci
Dans votre cas, vous pouvez appliquer à la fois X et Y des traductions avec la
translate
propriété :[source: MDN]
pour votre exemple, il devrait ressembler à ceci :
DÉMO:
CSS:
HTML:
Comme indiqué par cette réponse Comment appliquer plusieurs transforme en CSS3? vous pouvez appliquer plusieurs transformations sur le même élément en spécifiant sur la même déclaration :
Vous pouvez combiner X et Y se traduit par une seule expression:
Et, en général, plusieurs se transforme en une seule règle: