Améliorez l'utilisation de la perspective et de la transformation: tradlatez. L'affichage traditionnel des produits peut ne pas attirer bien l'attention des utilisateurs, mais si des éléments 3D appropriés sont ajoutés à l'écran, peut-être que l'effet est bon ~
Carte d'effet:
Expliquez: cette créativité n'est pas ce que je pense, imitant les autres, la créativité devrait être sur W3CPLUS. Bien sûr, le but est d'apprendre à tout le monde à le faire, à être une imitation élevée ~
Tout d'abord, apprenez à utiliser CSS3 pour faire un carré:
Avant qu'il y ait du CSS, un tel cube devrait être difficile à faire ~ bien, je pense que c'est difficile ~
HTML:
<body> <div class = wappent> <div class = cube> <div class = Sign from> 1 </div> <div class = size back> 6 </div> <div class = signe droit> 4 </ div </div> <div class = size Left> 3 </div> <div class = size top> 5 </div> <div class = signe en bas> 2 </div> </div> </ody>
Le stade de la barrette pour cet effet, c'est-à-dire l'élément de perspective. Le cube représente un cube, puis 6 div représente chaque côté.
Div # Cube Paramètres de la transformée: Preserve-3D, puis définissez Rotate et tradlatez chaque élément
Maintenant, toutes les nouilles sont chevauchées sur le même plan, nous abandonnons:
La police se déplace vers l'avant, la distance du semi-margin (50px) de la direction de l'axe z est de 50px;
Le dos tourne d'abord à 180 degrés autour de l'axe y, de sorte que la police est à l'extérieur, puis traduisant (50px), car elle a été tournée à 180 degrés à ce moment, donc Tanslatez est à la baisse, et il est en panne, et il est vers le bas.
De la même manière, l'autre plan tourne à 90 degrés autour de l'axe x ou de l'axe y, puis tradlatez (50px)
CSS:
.Wapper {marge: 100px Auto 0; ; Hauteur: 100px; ;} .top {-webkit -transform: rotatex (90Deg) translatez (50px);}. 90DEG) tradlatez (50px);} .bottom {-webkit-transform: rotatex (-90deg) translatez (50px);} .back {-webkit-transform: rotatey (-180deg) (50px);};Pour l'effet d'affichage, vous pouvez ajuster la distance de perspective ~
Eh bien, le cube est compris, donc cet affichage de produit n'est pas difficile;
HTML:
<! > <ul id = contenu> <li> <div class = wrapper> <img src = images / a.png> <span class = information> <strong> contrat </strong> la manière easiet way un formulaire d'acte à votre boutique. </span> </div> </li> <li> <div class = wrapper> <img src = images / b.jpeg> <span class = information> <strong> formulaire contractuel </strong> le moyen le plus simple de Ajoutez un formulaire contal à votre boutique. </strong> La façon la plus simple d'ajouter un formulaire de contact à votre boutique.
CSS:
<Style type = text / css> body {font-family: tahoma, arial;} #content {margin: 100px auto 0;} #content li, #content .wrapper, #content li img, #contentit li span {width: 310px; 888888; * /} #Content .wrapper {Posity: lié: -Webkit-Transform-Style: Preserve-3d; -webkit-Transitude: -Webkit-Transform .6s;} #Content l i img {top: 0; : 3PX; : -Webkit-gradient (linéaire, haut gauche, bas gauche, couleurs-arrêts (0%, RGBA (236, 241, 244, 1)), couleurs-stop (100%, RGBA (190, 202, 217, 1 1 , 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 117, 1 1, 1 1 , 117, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1)); 6s; 255, 255, 255, 0,5); Transform: Rotatex (95Deg);} #Content Li: Hover IMG {Box-Shadow: Aucun; , 0,3);CSS a été analysé ci-dessus. Autorisez toute la scène de partage des produits, nous avons donc ajouté un div.wapper pour lui pour définir le transformateur: préverse-3D, puis définir la perspective de l'effet de scène chaque li. L'effet de revers final est vraiment sur div.wapper.
Code source Cliquez pour télécharger
Ce qui précède est tout le contenu de cet article.