HTML5 + CSS3: 3D Album d'effet de Troie rotatif

Le but de ce blog est que l'instance séduisante de l'instance spéciale HTML5 CSS3 CSS3 a créé l'effet de flop 3D de Baidu Tieba.

Charte d'effet: Hé, j'ai fait quelques photos de la remise des diplômes universitaires dans un chevalier rotatif, tournant autour de mon grand texte, et la grâce de la culture de mon alma mater ~

Les attributs de perspective incluent deux attributs: aucun et la longueur de l'unité.

Parmi eux, la valeur par défaut de l'attribut Perspective n'est pas, ce qui signifie que l'objet 3D est visualisé à un angle illimité, mais il semble plat. Une autre valeur <Langth> accepte une valeur d'une unité supérieure à 0. Et son unité ne peut pas être le pourcentage. Plus la valeur de <Langth> est grande, plus l'angle apparaît loin, afin de créer une résistance assez faible et un très petit changement d'espace 3D. À l'inverse, plus cette valeur est petite, plus l'angle est proche, plus il est proche de créer un angle de intensité élevé et un grand changement 3D. Pour le dire simplement: lorsque les paramètres de perspective sont définis, plus cela signifie que plus l'effet 3D est évident, plus vos yeux sont proches de l'objet 3D et vice versa.

En supposant que lorsque vous définissez la perspective: 300px, plus la valeur du traduction est réglée, plus la taille de l'élément enfant est petite.

1. Tout d'abord, le conteneur de toutes les images est la position: absolue, superposée ensemble, puis définissez le rotation à la fois à 40 * i, i = 0, 1, 2 ... 9;

2. Ensuite, définissez la translatez pour chaque image du conteneur.

HTML:

 <! Text / javascript src = ../../ jQuery-1.8.3.js> </ script> <script type = text / javascript> // alert (64 / math.tan (20/180 * math.pi))) ); ; deg *] i ++) + deg))})});}); /1.jpg/> <span> faites une chose à la fois et faites bien .. </span> </li> <li> <img src = img / 2.jpg /> <span> faire une chose à un temps et bien. > <Img src = img // 4.jpg /> <span> ce que le mot fait est bien. Votre sécurité. li> <li> <img src = img / 7.jpg /> <span> ne jamais mettre le bureau que vous pouvez faire aujourd'hui jusqu'à demain. > <pan> Jack de tous les trands et maître de aucune. > </div> </ body> </ html "

CSS:

 li {largeur: 128px; 0, 0, 0, .5); {wid th: 900px; JPG) sans rapport 0 0; - Transition: -Webkit-Transform 1s; (0Deg) tradlatez (300px);} li: nth-child (1) {-webkit-transform: rotatey (40Deg) tradatez (300px);} li: nth-child (2) {-webkit-transform: rotat ey ( 80Deg) Translatez (300px);} li: nth-child (3) {-webkit-transform: rotatey (120Deg) tradatez (300px);} li: nth-child (4) {-webkit-transform: 16 0deg) translatez (300px);} li: nth-child (5) {-webkit-traansform: rotatey (200Deg) tradatez (300px);} li: nth-child (6) {-webkit-transform: rotatey (240deg) tradatez ( 300px);} li: nth-child (7) {-webkit-transform: rotatey (280deg) tradatez (300px);} li: nth-child (8) {-webkit-transform: rotatey (300px);} li: nth-child (9) {-webkit-transform: rotatey (360Deg) tradatez (300px);}

La scène div # est le stade, définit la perspective, chaque LI décolle, et traduiséz; alors nous allons définir # le conteneur à set -webkit-transformant: préserver-3d; La valeur par défaut, cela signifie que tous les sous-éléments sont présentés dans des plans 2D. Preserve-3D indique que tous les sous-éléments sont présentés dans l'espace 3D. Si la valeur du style transform est définie sur une réserve-3D sur un élément, elle indique qu'elle n'effectue pas une opération d'exposition plate et que tout son sous-élément est situé dans l'espace 3D. Dans des circonstances normales, cet attribut est utilisé pour l'élément d'exécution des effets d'animation 3D, c'est-à-dire qu'il utilise des effets d'animation 3D, de sorte que ses sous-éléments doivent être dans l'espace 3D.

Une chose à laquelle faire attention: Dans cet exemple, l'effet d'animation est en fait le clic de la souris. Il s'agit de faire pivoter ce Troie, vous n'avez donc qu'à changer l'angle Rotatey 40 du conteneur Div # à chaque fois.

Ce qui précède est tout le contenu de cet article.