L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Libérer la puissance des transformations 3D CSS3 dans la conception Web / Blogs / Perficient
Transformation 3D des éléments
Plongez dans le domaine passionnant des transformations 3D CSS3 ! Découvrez la magie du déplacement, de la rotation, de la mise à l’échelle et de l’inclinaison des éléments dans un espace tridimensionnel, ajoutant ainsi de la profondeur et du style à votre conception Web. Avec les fonctions CSS Transform et Transform Functions, libérez votre créativité et améliorez votre site Web avec des effets visuels époustouflants tout en garantissant une intégration transparente de la mise en page.
La section suivante décrit les fonctions de transformation 3D :
Fonction Translate3d() :
La fonction translate3d() déplace l’élément vers une nouvelle position le long des axes X, Y et Z à partir de son emplacement actuel. Il est noté translation(tx, ty, tz). Notez que les valeurs en pourcentage ne sont pas autorisées pour le troisième paramètre de valeur de traduction (tz).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 3D-Transformation</title>
<style>
.container{
width: 200px;
height: 200px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
margin: 30px;
}
.transformed {
transform: translate3d(25px, 25px, 50px);
}
</style>
</head>
<body>
<div class="container">
<img src="https://blogs.perficient.com/2024/05/22/css3-3d-transformations-elevate-your-web-design/Images/red-rose.jpg" alt="red-rose">
</div>
<div class="container">
<img src="https://blogs.perficient.com/2024/05/22/css3-3d-transformations-elevate-your-web-design/Images/red-rose.jpg" class="transformed" alt="red-rose">
</div>
</body>
</html>- Translate3d(25px, 25px, 50px) déplace l’image sur les axes X, Y et Z.
- Malgré les transformations 3D, le mouvement de l’axe Z peut ne pas être perceptible sur les éléments plats.
- Utilisez les propriétés CSS de perspective et d’origine de perspective pour la perception de la profondeur.
- Les éléments plus proches semblent plus grands ; les plus éloignés semblent plus petits.
- Sans perspective, les effets 3D ne seront pas visibles.
Sortir:
Fonction rotate3d() :
La fonction rotate3d() fait pivoter les éléments en 3D autour d’un [x,y,z] vecteur de direction par un angle donné, exprimé par rotation (vx, vy, vz, angle).
Par exemple, rotate3d(0, 1, 0, 60deg) fait pivoter une image autour de l’axe Y de 60 degrés et les valeurs négatives pivotent dans la direction opposée.
.transformed {
transform: rotate3d(0, 1, 0, 60deg);
}Sortir:
Fonction scale3d() :
La fonction scale3d() ajuste la taille d’un élément le long des axes X, Y et Z. Son impact devient perceptible lorsqu’il est combiné avec d’autres fonctions de transformation telles que la rotation et la perspective.
Par exemple, l’utilisation de scale3d(1, 1, 2) ajuste la taille le long de l’axe Z et rotate3d(1, 0, 0, 60deg) fait pivoter l’image autour de l’axe X de 60 degrés.
.transformed {
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);
}Sortir:
Fonction matrice3d() :
La fonction Matrix3d() permet des transformations 3D complètes telles que la translation, la rotation et la mise à l’échelle simultanément, en utilisant une matrice de transformation 4×4 avec 16 paramètres.
Vous trouverez ci-dessous une illustration illustrant une transformation 3D implémentée via la fonction Matrix3d().
.transformed {
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}Sortir:
Lorsque vous appliquez plusieurs transformations simultanément, il est plus facile d’utiliser des fonctions de transformation individuelles et de les organiser séquentiellement, comme illustré ici :
.transformed {
transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2);
}Sortir:
Fonctions de transformation 3D
Le tableau ci-dessous propose un résumé concis des différentes fonctions de transformation 3D disponibles.
En termes simples, les transformations 3D CSS-3 sont comme des outils spéciaux permettant de créer des contenus sympas sur des sites Web. Vous pouvez déplacer, faire pivoter, redimensionner et modifier des éléments en 3D pour rendre vos conceptions plus excitantes.
Source link