CSS3 Transforme 3D en utilisant CSS3 pour créer des cubes 3D dynamiques (pratique HTML5)

Dans le cours d'aujourd'hui, je vous présenterai comment créer des cubes 3D à l'aide de CSS3. Vous pouvez parcourir les effets réels via le lien ci-dessous, opérer les touches supérieures et droites de haut en bas pour réaliser l'effet de retournement du cube.

Commençons par comment le faire.

<div id = "Experiment">

<div id = "cube">

<div>

Un visage

</div>

<div>

En haut, en bas, à gauche, à droite

</div>

<div>

Lorem Ipsum.

</div>

<div>

Les nouvelles formes de navigation sont amusantes.

</div>

<div>

Cube 3D rotatif

</div>

<div>

Plus de contenu

</div>

</div>

</div>

Dans le HTML ci-dessus, les 6 divs avec classe comme visage représentent les 6 faces du cube, et ils se distinguent en utilisant les noms de classe d'un à six. Le récipient externe contient deux couches de conteneurs avec un cube ID et une expérience. Les deux couches sont nécessaires. Sans aucun, l'effet 3D ne peut être produit.

Parmi eux, l'expérience joue le rôle de l'objectif. Réglez la distance focale afin que l'effet 3D puisse être affiché sur les éléments internes.

L'attribut de perspective définit la profondeur du plan de l'axe Z et définit également les dimensions relatives des éléments au-dessus et en dessous du plan. En général, plus la valeur de la perspective est petite, plus l'objet est important, plus il est proche de vous; Plus la valeur de la perspective est grande, plus l'objet est petit, plus vous éloignez de vous. Vous pouvez voir l'effet via http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.

La propriété d'origine perspective définit l'origine de la perspective.

#expérience {

-Webkit-Perspective: 800;

-Moz-Perspective: 800;

-O-Perspective: 800;

Perspective: 800;

-Webkit-Perspective-Origin: 50% 200px;

-Moz-Perspective-Origin: 50% 200px;

-O-Perspective-Origin: 50% 200px;

Origine en perspective: 50% 200px;

}

Les propriétés définies par le cube contiennent une largeur et une hauteur fixes et ont réglé la position sur relative. La hauteur fixe et la largeur sont nécessaires afin que les éléments du cube puissent effectuer des animations 3D dans une zone définie. Si vous définissez la hauteur et la largeur à 100%, les éléments du cube se déplaceront sur toute la plage de page.

La transition est utilisée pour définir des propriétés liées à l'animation. style transform: Preserve-3d; Fait tous les éléments du cube produit des effets 3D dans son ensemble.

Vous pouvez parcourir http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transform-perspective-animate-transition/ pour plus d'informations.

CSS:

#cube {

Position: relative;

marge: 100px auto;

hauteur: 400px;

Largeur: 400px;

-Webkit-Transition: -Webkit-Transform 2s Linear;

-Moz-Transition: -moz-transform 2s linéaire;

-o-transition: -o-transform 2s linéaire;

Transition: Transform 2S linéaire;

-Webkit-Transform-style: Preserve-3d;

-Moz-Transform-style: Preserve-3d;

-o-transformage: Preserve-3d;

style transform: Preserve-3d;

}

Ensuite, définissez l'attribut CSS pour les 6 faces du cube.

.affronter {

Position: absolue;

Hauteur: 360px;

Largeur: 360px;

rembourrage: 20px;

Color en arrière-plan: RGBA (50, 50, 50, 0,7);

}

Ensuite, définissez les propriétés liées à la 3D des 6 faces, utilisez Rotatex ou Rotatey pour obtenir le retournement de la surface du cube et utilisez Translatez pour obtenir le mouvement de la surface du cube dans l'espace tridimensionnel.

#cube .one {

-Webkit-Transform: Rotatex (90Deg) Translatez (200px);

-moz-transform: Rotatex (90Deg) Translatez (200px);

-o-transform: Rotatex (90Deg) Translatez (200px);

Transform: Rotatex (90Deg) Translatez (200px);

}

#cube .two {

-Webkit-Transform: Translatez (200px);

-moz-transform: Translatez (200px);

-o-transform: Translatez (200px);

Transform: Translatez (200px);

}

#cube. trois {

-Webkit-Transform: Rotatey (90Deg) Translatez (200px);

-moz-transform: Rotatey (90Deg) Translatez (200px);

-o-transform: Rotatey (90deg) Translatez (200px);

Transform: Rotatey (90Deg) Translatez (200px);

}

#cube .four {

-Webkit-Transform: Rotatey (180Deg) Translatez (200px);

-moz-transform: Rotatey (180deg) Translatez (200px);

-o-transform: Rotatey (180deg) Translatez (200px);

Transform: Rotatey (180deg) Translatez (200px);

}

#cube .five {

-Webkit-Transform: Rotatey (-90DEG) Translatez (200px);

-moz-transform: Rotatey (-90DEG) Translatez (200px);

-o-transform: Rotatey (-90DEG) Translatez (200px);

Transform: Rotatey (-90DEG) Translatez (200px);

}

#cube .six {

-Webkit-Transform: Rotatex (-90DEG) Translatez (200px);

-moz-transform: Rotatex (-90DEG) Translatez (200px);

-o-transform: Rotatex (-90DEG) Translatez (200px);

Transform: Rotatex (-90Deg) Translatez (200px);

}

La dernière chose à faire est de lier l'événement de la clé à la page, de sorte que lorsque vous appuyez sur les touches vers le haut, vers le bas, la gauche et la droite, l'effet de mouvement de flip cube est obtenu.

javascript:

var xangle = 0, y passage = 0;

document.addeventListener ('keydown', fonction (e)

{

commutateur (e.Keyycode)

{

cas 37: // gauche

y passant - = 90;

casser;

cas 38: // up

xangle + = 90;

casser;

cas 39: // droit

Moids + = 90;

casser;

Cas 40: //

xangle - = 90;

casser;

};

$ ('cube'). style.webkitTransform = "rotatex (" + xangle + "deg) rotatey (" + yangle + "deg);

}, FAUX);

C’est tout pour le cours, vous pouvez l’essayer ensuite.