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 ?

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）

x, y, z ne peuvent pas être omis, sinon, écrivez 0

Mouvement 3D Sur la base du mouvement 2D, une direction supplémentaire qui peut être déplacée est ajoutée, qui est la z- la direction de l'axe

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.

1. Si vous souhaitez produire un effet 3D dans une page Web, vous avez besoin de perspective (entendue comme un objet 3D projeté dans un plan 2D)

2. Pour simuler la position visuelle humaine, vous pouvez penser à disposer un œil. pour voir

3. Perspective Nous appelons également distance de visualisation : la distance de visualisation est la distance entre l'œil humain et l'écran

4. Plus le point visuel est proche, plus l'image est grande sur le plan de l'ordinateur, et plus elle est éloignée, plus l'image est petite

5. L'unité de perspective est le pixel

La perspective inscrite sur la boîte parent de l'élément observé est

d : c'est la distance de visualisation est la distance de l'œil humain à l'image. l’écran. Plus la perspective est petite, plus l’objet est grand.

z : C'est l'axe z, la distance entre l'objet et l'écran. Plus l'axe z est grand (valeur positive), plus l'objet que l'on voit est grand.

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 rotation

transform:rotate3d(1,0,0,45deg)x轴旋转45deg
transform:rotate3d(1,1,0,45deg)对角线旋转45deg

La rotation 3D peut permettre à l'élément de tourner le long de l'axe x, de l'axe y, de l'axe z ou de l'axe personnalisé dans le plan tridimensionnel

Syntaxe :

transform:rotatex(45deg):沿x轴正方向旋转45deg
transform:rotatey(45deg):沿y轴正方向旋转45deg
transform:rotatez(45deg):沿z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

Pour déterminer le sens de rotation de l'élément, nous avons besoin d'un critère gaucher

Critère gaucher :

Le pouce de la main gauche pointe dans la direction positive de l'axe des x

La direction dans laquelle l'autre les doigts sont pliés est la direction dans laquelle l'élément tourne le long de l'axe x.

Différence

Style de transformation de présentation 3D

1. Contrôlez si le sous-élément active l'environnement tridimensionnel

2 : Le sous-élément plat n'active pas l'environnement tridimensionnel. space, le style de transformation par défaut

3. conserver -3d, les éléments enfants ouvrent un espace tridimensionnel

4 Le code est écrit dans le parent, mais il affecte la boîte enfant

5. et doit être utilisé plus tard

Syntaxe:

.fa {
perspective: 500px;
position: relative;
margin: 50px auto;
transform-style: preserve-3d;
}
.son1,
.son,
.fa {
width: 200px;
height: 200px;
transition: all 2s;
}

2. Style CSS

Spécification de la boîte Taille, n'oubliez pas d'ajouter le rendu 3D

La boîte arrière doit être tournée de 180 degrés le long de l'axe y

Enfin, la souris passe à travers la boîte et pivote de 180 degrés le long de l'axe y

(Partage vidéo d'apprentissage :

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!