ATOZ CSS Screencast: le Rotatey CSS se transforme

Ce tutoriel explore la transformée de CSS rotateY, permettant des rotations 3D autour de l'axe des y, parfaites pour des effets comme les flips de carte. Nous couvrirons également transform-style: preserve-3d pour un rendu 3D approprié et les propriétés perspective et perspective-origin pour contrôler l'angle de visualisation.

Concepts clés:

• rotateY: tourne les éléments autour de leur axe vertical (y). L'angle (en degrés, radians, etc.) détermine la quantité de rotation.
• transform-style: preserve-3d: essentiel pour créer des effets 3D réalistes. Appliqué au conteneur parent, il garantit que les éléments enfants conservent leurs positions 3D au lieu d'aplatir.
• perspective: simule la distance entre le spectateur et l'élément, influençant la perspective 3D. Une valeur plus élevée augmente la distance, ce qui rend l'effet 3D moins prononcé.
• perspective-origin: Définit le point de disparition, contrôlant le centre de la perspective. Il faut deux valeurs: les décalages horizontaux et verticaux.

Comprendre l'espace 3D dans CSS:

CSS fonctionne dans un système de coordonnées 3D (x, y, z). Tandis que z-index (discuté plus tard) gère l'ordre d'empilement dans le plan Z, rotateY et d'autres transformations 3D manipulent des éléments dans cet espace 3D. transform-style: preserve-3d est crucial pour visualiser ces transformations avec précision.

Rotation avec rotateY:

rotateY() tourne les éléments autour de l'axe y. Les valeurs positives tournent dans le sens horaire, les valeurs négatives dans le sens antihoraire. Par exemple:

img {
  transform: rotateY(45deg);
}

Animer rotateY Crée des effets dynamiques:

img {
  animation: spin 2s infinite linear;
}
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

Remarque: Rotation 180 ° peut montrer une image en miroir. Utilisez backface-visibility: hidden; pour contrôler la visibilité de la face arrière.

Perspective et profondeur:

La propriété perspective sur le conteneur parent simule la distance de visualisation. perspective-origin ajuste le point de fuite. Exemple:

.container {
  perspective: 500px; /* Adjust this value for different perspective strengths */
  perspective-origin: 50% 50%; /* Centered vanishing point */
}

combinant rotateY, transform-style: preserve-3d, perspective, et l'animation crée des effets 3D convaincants.

Questions fréquemment posées:

La section FAQ fournie couvre adéquatement des questions courantes sur rotateY, y compris son utilisation, sa combinaison avec d'autres transformations, animation, compatibilité du navigateur et types d'unités. Aucune autre expansion n'est nécessaire ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!