Origine et perspective des transformations
Modifiez le point de pivot des transformations avec transform-origin et ajoutez de la profondeur avec perspective.
Origine et perspective des transformations est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Valeur par défaut de transform-origin
Par défaut, les transformations s’effectuent autour du centre de l’élément : 50% 50%. La propriété transform-origin permet de modifier ce pivot.
Définir transform-origin
Cette propriété accepte des mots-clés, des pourcentages ou des longueurs. Format : x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin avec scale
Redimensionnement à partir du coin supérieur gauche, utile pour les animations d’ouverture de menus déroulants :
<div class="dropdown open">Dropdown menu</div>transform-origin avec une rotation
Faites pivoter une aiguille d’horloge autour de sa base :
<div class="clock"><div class="hand"></div></div>Propriété perspective
perspective définit la distance entre l’utilisateur et le plan z=0 pour les transformations 3D. Les petites valeurs créent une distorsion de perspective plus marquée ; les grandes valeurs produisent une profondeur plus subtile.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Modifie le point de fuite de la perspective. La valeur par défaut est le centre (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective comme fonction
perspective() peut également être utilisée comme fonction de transformation sur l’élément lui-même, et non sur son parent. Le contexte 3D est alors limité à cet élément.
<div class="card">Card</div>transform-style: preserve-3d
Par défaut, les transformations 3D des éléments enfants sont aplaties en 2D. Définissez transform-style: preserve-3d sur le parent pour conserver le positionnement 3D réel des enfants.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Effet de retournement de carte
La carte classique qui se retourne, avec perspective et preserve-3d :
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden masque la face arrière d’un élément transformé en 3D. Cette propriété est essentielle pour les cartes qui se retournent lorsque leur verso ne doit pas être visible à travers le recto.
Combiner perspective et origine
Un effet spectaculaire d’inclinaison 3D au survol, qui réagit à la position du curseur :
<div class="card demo-active">3D Tilt Card</div>Vérification rapide
Un menu déroulant utilise transform: scaleY(0) pour être masqué et scaleY(1) pour être affiché. Quelle valeur de transform-origin le fait s’agrandir vers le bas à partir du haut ?
Récapitulatif
transform-origin modifie le point de pivot des rotations et des mises à l’échelle — ce qui est essentiel pour l’ouverture des menus déroulants, les aiguilles d’horloge et les inclinaisons au survol. La propriété perspective sur le parent crée le contexte de profondeur 3D. transform-style: preserve-3d active les éléments 3D imbriqués. backface-visibility: hidden masque l’arrière des éléments dans les effets de retournement.
Questions Fréquemment Posées
La leçon « Origine et perspective des transformations » est-elle gratuite ?
Oui — le texte complet de « Origine et perspective des transformations » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Origine et perspective des transformations » ?
Modifiez le point de pivot des transformations avec transform-origin et ajoutez de la profondeur avec perspective. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Origine et perspective des transformations » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Translate, Rotate et Scale
- Transformations par inclinaison et matrice
- Origine et perspective des transformations
- Transformations 3D : rotateX, rotateY, translateZ