Vidéo: Tutoriel CSS : Pli 3D en CSS3 2025
CSS 3 vous permet de créer de nombreux effets sympas sur votre site web pour les afficher sur l'iPhone et l'iPad. Les propriétés de transformation CSS 3 vous permettent de transformer un élément pour créer des effets en 2D et en 3D. Vous pouvez spécifier une liste de transformations pour modifier plusieurs aspects d'un élément. Si plusieurs options sont spécifiées, chacune est appliquée dans l'ordre indiqué.
Les options de transformation incluent celles décrites dans cette liste:
-
échelle - Modifie la hauteur et la largeur d'un élément. Vous pouvez spécifier deux nombres pour définir une échelle différente pour la largeur et la hauteur. Cependant, cet élément est généralement utilisé avec un seul nombre pour mettre à l'échelle un élément proportionnellement. Le premier des exemples suivants transforme l'élément à l'échelle jusqu'à la moitié de sa taille, et le second transforme l'élément à la moitié de la largeur et à la hauteur de la taille:
-webkit-transform: scale (0,5); -webkit-transform: échelle (2, 0. 5);
-
translate - Utilise cette propriété pour traduire , ou déplace un élément de la position A à la position B de manière égale le long des axes x et y. Vous pouvez également utiliser translateX et translateY pour déplacer des éléments le long d'un seul axe à la fois. Par exemple, ce code provoque un déplacement d'un élément de 150 pixels à partir de la gauche et de 150 à partir du haut:
-webkit-transform: translate (150px, -150px);
-
skew - Utilisez cette propriété pour biaiser , ou modifiez la position d'un élément en fonction d'une valeur spécifiée qui incline un élément sur les axes x et y. Par exemple, cela pourrait fausser un élément de 20 degrés sur l'axe des x:
-webkit-transform: skew (15deg, 4deg);
-
rotate - Utilisez cette propriété pour faire pivoter , ou modifier la position d'un élément en fonction d'une valeur spécifiée qui contrôle l'angle de rotation. Par exemple, le premier exemple de ce code fait pivoter un élément de 5 degrés vers la droite, le second fait pivoter l'élément -5 (négatif 5) degrés.
Comme vous pouvez le voir sur la figure, les photos à droite et à gauche de ce dessin s'éloignent de l'image centrale:
-webkit-transform: rotate (5deg); -webkit-transform: rotation (-5deg);
Dans l'exemple de site SCUBA montré dans cette figure, notez que les deux images externes tournent respectivement à gauche et à droite, en utilisant la fonction Rotation CSS - mais uniquement sur Safari, Firefox et Chrome. Visitez cette page avec IE et les boîtes sont toutes en ligne droite, mais elles ne semblent pas si mauvaises, donc il n'y a pas de mal à faire.
Notez également qu'il y a une image dans le bas de la conception, de sorte que lorsque vous passez de l'iPad au mode paysage, le contenu occupe tout l'écran.
