J'essaie de créer une sorte de fond de perspective pour mon site Web. C'est littéralement une UL pleine d'images plates et je tiens à créer une sensation "incurvée" comme une foule arrondie. Où il se trouve vers l'intérieur et de manière perceptible vers l'intérieur et se courbe vers les extrémités.
L'exemple du cercle d'affichage est le plus proche que je puisse trouver http: //www.webkit .Org / Blog-Fichiers / 3D-Transforms / Poster-Circle.HTML sauf que je n'ai pas besoin du "front" - juste le dos. Chaque image est 100px x 100px, 23 images par rangée et quatre rangées.
Je suis à peu près une perte complète quant à la manière de vous approcher ... J'ai essayé de différentes manières d'appliquer unique -WebKit-Transform: rotation (x) translatez (x) sur chaque image mais jamais tout à fait s'y rendre (en difficulté avec calculer les bonnes valeurs ou en utilisant une mauvaise chose entièrement), ainsi que de jouer avec la perspective.
4 Réponses :
Je sais que ce n'est pas exactement ce que vous voulez, mais je viens de le jeter ensemble et de vouloir voir si c'est dans la direction générale:
Ceci est un simple "mur d'affiche" avec 9 divs - tous les Les divs sont absolument positionnés dans une enveloppe DIV. P>
dans le wrapper div, vous ajoutez: -webkit-transformer-style: conserve-3D; C'est ce qui crée réellement l'effet 3D. Vous pouvez éventuellement ajouter un paramètre de perspective en fonction du degré de formidable souhaité. p>
et dans le CSS, vous créez un style DIV qui ressemble à ceci pour les images de la main gauche: p> et pour les images de droite: P> -webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
-webkit-transform-origin: 0% 0%;
Je l'ai modifié un peu aussi avec ma version ici:
Pas exactement ce que la photo colorée démontre si
: -)
Il suffit de trouver cela après avoir créé ce qui suit qui pourrait vous aider: http://jsfiddle.net/remybach / hPSJV / 2 /
La viande de celui-ci réside dans la présente: