L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Explorer les transformations CSS3 2D / Blogs / Perficient
Prêt à faire passer votre site Web de statique à sensationnel ? Plongez dans le monde des transformations 2D en CSS3 et découvrez comment vous pouvez améliorer sans effort votre conception Web avec des effets dynamiques ! Dites adieu aux mises en page ennuyeuses et bonjour aux animations et transitions accrocheuses. Libérons ensemble la puissance de CSS3 !
Transformation 2D des éléments
En utilisant CSS3, vous pouvez pimenter votre page Web avec des effets sympas tels que le déplacement, la rotation, le redimensionnement et l’inclinaison d’éléments.
Vous n’avez pas à craindre de gâcher votre mise en page : ces transformations n’affecteront pas le reste de votre mise en page.
Fonction traduire()
Faisons glisser les choses en utilisant la fonction translation() !
La fonction ‘translate()’ en CSS décale les éléments sur la page avec ‘translate(tx, ty).’ En omettant « ty » se déplace latéralement, « translation(200px, 50px) » déplace l’image de 200 pixels vers la droite et de 50 pixels vers le bas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3 2D-Transforms</title>
<style>
img {
transform: translate(200px, 50px);
}
.box {
margin: 50px;
width: 150px;
height: 150px;
background-image: url("/images/star.png") no-repeat;
}
</style>
</head>
<body>
<div class="box">
<img src="https://blogs.perficient.com/2024/05/22/elevate-your-web-design-exploring-2d-css3-transformations/images/star.png" alt="star">
</div>
</body>
</html>Sortir:
Fonction rotation() :
Donnons un tour aux éléments avec « rotate() » !
La fonction CSS ‘rotate()’ fait pivoter une image dans le sens des aiguilles d’une montre autour de son origine selon un angle spécifié, comme rotate(30deg). Les valeurs négatives font pivoter l’élément dans le sens inverse des aiguilles d’une montre.
img {
transform: rotate(30deg);
}Sortir:
Fonction scale() :
Agrandissons ou réduisons les choses avec ‘scale()’ !
La fonction CSS ‘scale()’ ajuste la taille de l’élément avec scale(sx, sy), où ‘sx’ est une mise à l’échelle horizontale et ‘sy’ est verticale (la valeur par défaut est ‘sx’ si non spécifié). ‘scale(1.5)’ agrandit les deux dimensions ; ‘scale(1)’ conserve la taille d’origine.
img {
transform: scale(1.5);
}Sortir:
Fonction Skew() :
Inclinons les éléments avec ‘skew()’ !
La fonction CSS ‘skew()’ incline un élément le long des axes X et Y ; l’inclinaison (-40 degrés, 15 degrés) s’incline de 40 degrés vers la gauche sur X et de 15 degrés vers le bas sur Y.
img {
transform: skew(-40deg, 15deg);
}Sortir:
Fonction matrice() :
La fonction « matrix() » en CSS combine diverses transformations telles que le déplacement, la rotation, le redimensionnement et l’inclinaison d’un élément en même temps. Il nécessite six nombres sous forme matricielle.
Syntaxe : transformation : matrice (a, b, c, d, e, f) :
- a (mise à l’échelle horizontale)
- b (inclinaison horizontale)
- c (inclinaison verticale)
- d (mise à l’échelle verticale)
- e (traduction horizontale)
- f (traduction verticale)
traduire (tx, ty):
Déplace l’élément horizontalement de tx et verticalement de ty. Représenté sous forme de matrice (1, 0, 0, 1, tx, ty).faire pivoter(a): Fait pivoter l’élément selon l’angle « a » (en degrés). Affiché sous forme de matrice (cos (a), sin (a), -sin (a), cos (a), 0, 0).
échelle (sx, sy):
Modifie la taille de l’élément. La mise à l’échelle horizontale est sx et la verticale est sy. Forme matricielle : matrice(sx, 0, 0, sy, 0, 0).
biais (hache, est):
Incline l’élément horizontalement par axe et verticalement par ay (en degrés). Matrice : matrice(1, tan(ay), tan(ax), 1, 0, 0).
Combinez ces valeurs matricielles pour effectuer plusieurs transformations à la fois pour obtenir l’effet d’élément souhaité.
Voici un exemple d’exécution de la transformation 2D à l’aide de la fonction Matrix().
img {
transform: matrix(0, -1, 1, 0, 200px, 50px);
}
Sortir:
Cependant, lorsque vous devez appliquer plusieurs transformations simultanément, il est souvent plus simple d’utiliser les fonctions de transformation individuelles les unes après les autres dans l’ordre souhaité, comme ceci :
img {
transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);
}Sortir:
Fonctions de transformation 2D :
Le tableau suivant donne un bref aperçu de toutes les fonctions de transformation 2D.
L’ajout de transformations 2D à votre site Web à l’aide de CSS lui donne une meilleure apparence sans gâcher sa mise en page. Des fonctions telles que translate(), rotate(), scale() et skew() vous permettent de faire des choses intéressantes avec des éléments, rendant votre site plus attrayant. Ils sont faciles à utiliser et vous offrent de nombreuses façons de rendre votre site Web génial. Essayez les transformations 2D aujourd’hui et voyez la différence !
Source link