css3 transform 3d Utilisez CSS3 pour créer un cube 3D dynamique (pratique HTML5)_compétences du didacticiel HTML5

Dans le cours d'aujourd'hui, je vais vous présenter comment utiliser CSS3 pour créer un cube 3D. Vous pouvez parcourir l'effet réel via le lien ci-dessous et utiliser les touches haut, bas, gauche et droite pour obtenir l'effet de retournement du cube.
Adresse de démonstration : http://www.jb51.net/jiaoben/70022.html
Commençons par comment le réaliser.
html :

Copiez le code

Le code est le suivant :

>

Haut, bas, gauche, droite

>
Lorem ipsum

Les nouvelles formes de navigation sont amusantes

>

Cube 3D rotatif

/div>

Dans le code HTML ci-dessus, les 6 divs avec face de classe représentent respectivement les 6 côtés du cube, en utilisant les classes. de un à six Noms les distinguent. L'extérieur contient deux couches de conteneurs avec les identifiants du cube et de l'expérience. Les deux couches sont nécessaires sans l'une ou l'autre, l'effet 3D ne peut pas être produit.
L'expérience joue le rôle d'une lentille. Mettez l'accent dessus pour que l'effet 3D soit affiché sur les éléments internes. L'attribut
perspective définit la profondeur du plan de l'axe z et définit également les tailles relatives des éléments au-dessus et au-dessous du plan. En général, plus la valeur de perspective est petite, plus l'objet est grand et plus il est proche de vous ; plus la valeur de perspective est grande, plus l'objet est petit et plus il est éloigné de vous. Vous pouvez vérifier l'effet sur http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.
L'attribut perspective-origin définit l'origine de la perspective.

css
 :



Copier le code

Le code est le suivant :

#experiment { -webkit-perspective : 800 ; -moz-perspective : 800 ;

-o-perspective : 800 ;

perspective : 800 ; -perspective-origine : 50 % 200px ;

-moz-perspective-origin : 50 % 200px ; >}


Les propriétés définies par cube contiennent une largeur et une hauteur fixes, et la position est définie sur relative. Une hauteur et une largeur fixes sont nécessaires pour que les éléments du cube puissent effectuer une animation 3D dans une zone limitée. Si vous définissez la hauteur et la largeur sur 100 %, les éléments du cube se déplaceront dans toute la page.
La transition est utilisée pour définir les attributs liés à l'animation. transform-style : preserve-3d ; permet à tous les éléments du cube de produire un effet 3D dans son ensemble.
Vous pouvez visiter http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ pour plus d'informations.
css :

Copier le code


Le code est le suivant :


# cube {

position : relative ;

marge : 100px auto ; hauteur : 400px ; largeur : -webkit-transition : -webkit-transform 2s linéaire ; moz-transition : -moz-transform 2s linéaire ; -o-transition : -o-transform 2s linéaire ;

transition : transformation 2s linéaire ; 🎜>- moz-transform-style : préserver-3d ;

-o-transform-style : préserver-3d ;

transform-style : préserver-3d ;
}


Suivant Définir les propriétés CSS uniformément pour les 6 faces du cube.

css
 :





Copier le code

Le code est le suivant :

.face { position : absolue ;
hauteur : 360 px ;
largeur : 360 px ; , 0.7) ;

}

Ensuite, définissez les attributs 3D liés aux six faces, utilisez rotateX ou rotateY pour inverser l'orientation de la surface du cube et utilisez translateZ pour déplacer la surface du cube dans le Espace 3D. css

 :

Copier le code


Le code est le suivant :

#cube .one {
-webkit-transform : rotateX(90deg) translateZ(200px);
-moz-transform : rotateX(90deg) translationZ(200px);
-o-transform : rotateX(90deg) translationZ(200px);
transformation : rotateX(90deg) translationZ(200px);
}
#cube .two {
-webkit-transform : translateZ(200px);
-moz-transform : translateZ(200px);
-o-transform : translateZ(200px);
transformation : traduireZ(200px);
}
#cube .trois {
-webkit-transform : rotateY(90deg) translateZ(200px);
-moz-transform : rotateY(90deg) translationZ(200px);
-o-transform : rotateY(90deg) translationZ(200px);
transformation : rotationY(90deg) translationZ(200px);
}
#cube .four {
-webkit-transform : rotateY(180deg) translateZ(200px);
-moz-transform : rotateY(180deg) translationZ(200px);
-o-transform : rotateY(180deg) translationZ(200px);
transformation : rotationY(180deg) translationZ(200px);
}
#cube .five {
-webkit-transform : rotateY(-90deg) translateZ(200px);
-moz-transform : rotateY(-90deg) translationZ(200px);
-o-transform : rotateY(-90deg) translationZ(200px);
transformation : rotationY(-90deg) translationZ(200px);
}
#cube .six {
-webkit-transform : rotateX(-90deg) translateZ(200px);
-moz-transform : rotateX(-90deg) translationZ(200px);
-o-transform : rotateX(-90deg) translationZ(200px);
transformation : rotateX(-90deg) translationZ(200px);
}

最后要做的是为页面绑定keydown事件，这样当你按下上下左右键的时候，实现立方体的翻转运动效果。
javascript：

复制代码

代码如下 :

var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37 : // gauche
yAngle -= 90;
break;
case 38: // up
xAngle = 90;
break
case 39: // right
yAngle = 90; 40 : // vers le bas
xAngle -= 90;
break
};
$('cube').style.webkitTransform = "rotateX(" xAngle "deg) rotateY(" yAngle " deg)";
}, faux);


课程就讲到这里，接下来大家可以动手尝试一下。

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn