Propriétés de transformation CSS 3D : transformation et perspective

Propriétés de transformation CSS 3D : transformation et perspective, exemples de code spécifiques requis

Les propriétés de transformation CSS 3D sont une technique puissante qui peut obtenir des effets visuels époustouflants avec un code simple. Parmi elles, les deux propriétés les plus couramment utilisées sont la transformation et la perspective.

1. Attribut de transformation

L'attribut de transformation est utilisé pour faire pivoter, mettre à l'échelle, incliner, déplacer et d'autres opérations sur les éléments. Il peut obtenir différents effets en définissant différents paramètres.

1. Rotation

Vous pouvez faire pivoter des éléments en définissant le paramètre de rotation. Par exemple :

div {
  transform: rotate(45deg);
}

2. Scale

Vous pouvez réaliser la mise à l'échelle des éléments en définissant le paramètre d'échelle. Par exemple :

div {
  transform: scale(1.5);
}

3. skew

Vous pouvez incliner l'élément en définissant le paramètre d'inclinaison. Par exemple :

div {
  transform: skew(30deg);
}

4. Move

Vous pouvez déplacer des éléments en définissant le paramètre de traduction. Par exemple :

div {
  transform: translate(100px, 50px);
}

2. Attribut perspective

L'attribut perspective est utilisé pour définir le point d'observation dans la scène tridimensionnelle et affecte l'effet de perspective de l'élément. Il peut changer la perspective des éléments en définissant différents paramètres.

div {
  perspective: 800px;
}

Après avoir défini l'attribut perspective, nous devons utiliser l'attribut transform-style pour appliquer l'effet de perspective aux éléments enfants de l'élément.

div {
  perspective: 800px;
  transform-style: preserve-3d;
}

3. Application aux exemples

Ce qui suit est un exemple pour montrer comment utiliser les attributs de transformation et de perspective pour obtenir un effet de cube.

Le code HTML est le suivant :

<div class="cube">
  <div class="face front">前</div>
  <div class="face back">后</div>
  <div class="face left">左</div>
  <div class="face right">右</div>
  <div class="face top">上</div>
  <div class="face bottom">下</div>
</div>

Le code CSS est le suivant :

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  animation: spin 6s linear infinite;
}

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

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

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

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

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

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

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

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

Le code ci-dessus implémente un cube simple et obtient des effets de rotation et de perspective grâce aux propriétés de transformation et de perspective. Vous pouvez exécuter le code vous-même pour voir l'effet.

Pour résumer, les propriétés de transformation CSS 3D, transformation et perspective, sont des outils importants pour créer des effets visuels exquis. Avec un code simple, nous pouvons obtenir divers effets d'animation sympas et améliorer l'attrait visuel des pages Web.

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!