Bonjour,
J'essaie d'utiliser le tuto Pli 3D en CSS3 mais je ne comprends pas un truc, j'ai un mal fou à le faire fonctionner avec un img de 600px X 180px.
Voilà ce que j'ai modifié sur le CSS fournit :

section {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 600px;
height: 180px;
margin: 0 auto;
margin-top: -90px; }
article {
position: relative;
width: 600px;
height: 180px;
background-color: #191919;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }

En fait, la charnière fonctionne bien, c'est la partie bottom qui est tronquée en hauteur.
http://www.videopathe.com/grakikart/

Si quelqu'un pouvait m'aider…
Merci.

2 réponses


hatfab
Auteur
Réponse acceptée

Merci de ta réponse. Chez-moi ça fonctionne mais avec -10% ou encore -90px; But why ?! J'aimerais bien comprendre, 90 px c'est la moitié de la hauteur de mon img mais -10% ça ne corresponds à rien !

article .bot img {
margin-top: -15%;
}

Moi ca marche avec ça sous chrome et je sais pas pourquoi lol