Interprétation des propriétés de la vue CSS 3D : transformation et perspective

Interprétation des propriétés de la vue CSS 3D : transformation et perspective, des exemples de code spécifiques sont requis

Introduction :
Dans la conception Web moderne, les effets 3D sont devenus un élément très populaire. Grâce aux propriétés de transformation et de perspective de CSS, nous pouvons facilement ajouter des effets visuels 3D aux pages Web pour les rendre plus vivantes et attrayantes. Cet article expliquera ces deux propriétés et fournira des exemples de code spécifiques.

1. Attribut Transform :
L'attribut transform est un attribut très puissant en CSS. Il peut réaliser diverses opérations de transformation telles que la rotation, la mise à l'échelle, le mouvement et l'inclinaison des éléments. Dans la vue 3D, nous pouvons utiliser l'attribut transform pour transformer des éléments dans l'espace 3D.

Voici quelques fonctions de transformation couramment utilisées :

1. Rotation :
   transform : rotateX(45deg); // Rotation de 45 degrés autour de l'axe X
   transform: rotateY(45deg); // Rotation de 45 degrés autour de l'axe Y ;
   transform: rotateZ(45deg); // Rotation de 45 degrés autour de l'axe Z
2. Scale:
   transform: scale(2); // Zoom deux fois sur les axes X et Y
   transform: scaleX(2); Sur l'axe X Agrandir deux fois
   transform: scaleY(2); // Agrandir deux fois sur l'axe Y
3. Déplacer:
   transform: translationX(100px); // Déplacer 100 pixels sur l'axe X
   transform: translateY(100px) ; / / Déplacer 100 pixels sur l'axe Y
   transform: translationZ(100px); // Déplacer 100 pixels sur l'axe Z
4. Tilt:
   transform: skewX(45deg); // Incliner 45 degrés le long de l'axe X
   transform : skewY( 45deg); // Inclinaison de 45 degrés le long de l'axe Y

En combinant différentes fonctions de transformation, nous pouvons obtenir des effets de transformation 3D complexes. Par exemple, nous pouvons utiliser la rotation, la mise à l'échelle et le mouvement pour créer un cube 3D :

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

Ce code créera un cube de 200 x 200 pixels avec une couleur de fond noir translucide sur tous les côtés. La transformation de chaque visage dans l'espace 3D peut être réalisée grâce à l'attribut transform. Par exemple, en donnant à l'une des faces TranslateZ(100px), vous pouvez la déplacer vers l'avant de 100 pixels par rapport au point de vue, formant ainsi la face avant du cube.

2. Attribut perspective : 
L'attribut perspective est utilisé pour définir l'effet de perspective de l'élément. En définissant la position et la distance d'observation du point de perspective, cela peut affecter les performances de l'effet de transformation 3D. La perspective doit également être utilisée avec l'attribut transform.

Vous pouvez définir l'attribut perspective pour que les éléments produisent des effets de loin et de près dans l'espace 3D. Par exemple :

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}

Dans cet exemple, en définissant la perspective : 1000px, nous donnons à l'élément un effet de distance de 1000 pixels. Vous pouvez ajuster la distance d'un élément dans l'espace 3D en modifiant la valeur de perspective.

Résumé :
En utilisant les propriétés de transformation et de perspective de CSS, nous pouvons facilement ajouter des effets 3D aux pages Web. L'attribut transform peut implémenter des opérations de transformation telles que la rotation, la mise à l'échelle, le mouvement et l'inclinaison des éléments dans l'espace 3D. L'attribut perspective peut contrôler l'effet de perspective des éléments dans l'espace 3D. En combinant les deux, nous sommes en mesure de créer une riche variété d’effets 3D.

Référence :

• Transformation CSS (https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
• Perspective CSS (https://developer.mozilla.org/zh- CN /docs/Web/CSS/perspective)

(Remarque : l'exemple de code ci-dessus est uniquement destiné à un effet de démonstration, l'application réelle doit être ajustée en fonction des besoins spécifiques)

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!