L'axe z du plan tridimensionnel en CSS3 a une valeur négative. Dans le système de coordonnées tridimensionnelles, la valeur de l'axe z vers l'extérieur de l'écran est positive et la valeur vers l'intérieur de l'écran est négative ; lorsque l'axe z dans la valeur de l'attribut Translate3D est négatif ; L'élément est déplacé dans l'écran et la syntaxe est "transform:translate3d(x, y,z)".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Y a-t-il une valeur négative pour l'axe z du plan tridimensionnel en CSS3 ? Le système de coordonnées fait référence à l'espace tridimensionnel. L'espace est composé de trois axes, l'axe Z Il y a des valeurs positives à l'extérieur de l'écran et des valeurs négatives à l'intérieur !
Mouvement 3D traduire3D
transform: translateX(100px) translateY(100px) translateZ(100px);简写方法transform:translate3d(x,y,z)
transform:translateX(100px),仅仅在X轴移动 transform:translateY(100px),仅仅在Y轴移动 transform:translateZ(100px),仅仅在Z轴移动 transform:translate3d(x,y,z),设置,xyz的值,z要用像素单位,不带百分比
perspective
produit des effets stéréoscopiques visuels proches, grands et petits sur le plan 2D, mais l'effet n'est que bidimensionnel.
translateZ
Donnez à une boîte parent une valeur de perspective et donnez à différents divs différentes valeurs z, et les effets seront différents.
Rotation 3D rotate3d
transform:rotate3d(x,y,z,deg), faites pivoter l'angle deg le long de l'axe personnalisé (comprenez-le)
xyz représente le vecteur de l'axe de rotation, indiquant l'axe vectoriel le long du vecteur Rotation, le dernier représente l'angle de rotationtransform:rotate3d(1,0,0,45deg)x轴旋转45deg transform:rotate3d(1,1,0,45deg)对角线旋转45deg
transform:rotatex(45deg):沿x轴正方向旋转45deg transform:rotatey(45deg):沿y轴正方向旋转45deg transform:rotatez(45deg):沿z轴正方向旋转45deg transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可)
Différence
Style de transformation de présentation 3D
1. Contrôlez si le sous-élément active l'environnement tridimensionnel2 : Le sous-élément plat n'active pas l'environnement tridimensionnel. space, le style de transformation par défaut3. conserver -3d, les éléments enfants ouvrent un espace tridimensionnel4 Le code est écrit dans le parent, mais il affecte la boîte enfant5. et doit être utilisé plus tardSyntaxe:.fa { perspective: 500px; position: relative; margin: 50px auto; transform-style: preserve-3d; } .son1, .son, .fa { width: 200px; height: 200px; transition: all 2s; }
tutoriel vidéo CSS
)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!