Transformation CSS 3D En CSS, en plus de la transformation 2D des éléments de la page, vous pouvez également effectuer une transformation 3D sur des éléments d'objet (pensez à la page comme à un espace tridimensionnel pour déplacer, faire pivoter, redimensionner et incliner les éléments de la page, etc. .). Comme les transformations 2D, les transformations 3D n’affectent pas les éléments environnants et peuvent chevaucher d’autres éléments. Cependant, l'élément transformé occupera toujours l'espace dans sa position par défaut (avant la transformation).
Système de coordonnées tridimensionnelles
Comprenons d'abord le système de coordonnées tridimensionnelles. Le système de coordonnées tridimensionnel ajoute un axe z au système de coordonnées bidimensionnel d'origine, formant ainsi un espace tridimensionnel, comme le montre la figure ci-dessous :
①Axe des x : horizontalement vers la droite Remarque : le côté droit de x est une valeur positive et le côté gauche est une valeur négative
②Axe y : verticalement vers le bas Remarque : y a des valeurs positives en dessous et des valeurs négatives au-dessus.
③Axe Z : Écran vertical Remarque : Valeurs positives vers l'extérieur et valeurs négatives vers l'intérieur
Propriétés de conversion
Méthode de transformation 3D
1.translate3d()
La fonction translate3d() permet de déplacer la position d'un élément dans l'espace 3D. La caractéristique de cette transformation est de définir le décalage de l'élément dans chaque direction (axe X, axe Y, axe Z) sur trois. coordonnées vectorielles dimensionnelles. Le format syntaxique de la fonction est le suivant :
traduire3d(tx,ty,tz)
La description des paramètres est la suivante :
(1) tx : représente la distance parcourue par l'élément dans la direction horizontale (axe X) ;
(2) ty : représente la distance parcourue dans la direction verticale (axe Z) de l'élément ;
(3) tz : indique la distance parcourue par l'élément sur l'axe Z. Les valeurs de pourcentage ne peuvent pas être utilisées pour ce paramètre.
2. traduireZ()
La fonction translateZ() est utilisée pour déplacer des éléments le long de l'axe Z du système de coordonnées tridimensionnelles. Le format syntaxique de la fonction est le suivant :
traduireZ(tz);
Le paramètre tz est utilisé pour définir la distance parcourue par l'élément sur l'axe Z.
Astuce : translateZ(tz); équivaut à l'abréviation de translate3d(0, 0, tz);.
3.rotation3d()
La fonction rotate3d() est utilisée pour définir l'angle de rotation de l'élément le long de l'axe X, de l'axe Y ou de l'axe Z. Cette fonction fera pivoter l'élément uniquement le long de l'axe fixe et ne déformera pas l'élément. Le format de syntaxe de la fonction rotate3d() est le suivant :
rotation3d(x,y,z,a)
La description des paramètres est la suivante :
x : définit la coordonnée de l'axe X de l'axe de rotation ;
y : définit la coordonnée de l'axe Y de l'axe de rotation ;
z : définissez la coordonnée de l'axe Z de l'axe de rotation ;
a : Définissez l'angle de rotation de l'élément. Un angle positif signifie une rotation dans le sens des aiguilles d'une montre et un angle négatif signifie une rotation dans le sens inverse des aiguilles d'une montre.
4. échelle3d()
La fonction scale3d() peut modifier la taille (mise à l'échelle) des éléments. Le format syntaxique de la fonction est le suivant :
échelle3d(sx,sy,sz)
La description des paramètres est la suivante :
sx : représente le rapport d'échelle de l'élément dans la direction de l'axe X ;
sy : représente le rapport d'échelle de l'élément dans la direction de l'axe Y ;
sz : indique le rapport de mise à l'échelle de l'élément dans la direction de l'axe Z.
5.matrice3d()
La fonction matrice3d() est très similaire à la fonction matrice() que nous avons apprise précédemment, mais la fonction matrice3d() peut utiliser une matrice 4 × 4 pour décrire une transformation tridimensionnelle (3D). Toutes les opérations de conversion 3D peuvent être effectuées en même temps via la fonction Matrix3d(). Le format de syntaxe de la fonction est le suivant :
matrice3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
La description des paramètres est la suivante :
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4 : utilisés pour décrire diverses transformations 3D ;
a4, b4, c4 : indique le degré de transformation de l'élément.
Exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Document</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*Laissez la sous-boîte conserver un Environnement de l'espace 3D*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100 %; background-color:pink;}.boxdiv:last-child{background-color:aquamarine;transform:rotateX(60deg);}</style></head><body><div><div><div> </ div><div></div></div></div></body></html>Résultats en cours d'exécution :
