28172 sujets

CSS et mise en forme, CSS3

Volume 3D en CSS3

Bonjour à tous,

Je bute sur un problème en CSS3.

En fait je souhaiterais reproduire l'effet d'une pièce de monnaie qui tournerait sur elle même, avec un effet de volume 3D sur la tranche. Voici la base :

<body>
	<div class="circle0"></div>
</body>


.circle0 {
background: #3c5b9a;-webkit-border-radius: 50px;-webkit-transform: translateZ(1px);
-webkit-transform:rotateY(0deg);
width:90px;
height:90px;
}
.circle0:hover {
-webkit-transform: rotateY(180deg);
-webkit-transition:all 0.8s ease;
}

(code fonctionnant sur chrome !)

Pour le moment pas de problème, j'ai mon cercle qui tourne Smiley langue

Et la ou je bloque c'est pour mettre du volume3D à la tranche sur ce cercle.

J'ai essayé de créer 10 cercles identiques en incrémentant le translateZ d'un pixel pour former une "couche" de 10 cercles en profondeur. Mais rien à faire, ils sont toujours collé les uns au autres.

Qui aurait aurait une idée ? ou une meilleur méthode que ce système d’empilement de forme.

Je vous remercie.
Modifié par PapaDong (07 Mar 2013 - 19:35)
J'ai trouvé un exemple sur internet
http://mathieujouhet.com/demos/css3D/

Il utilise plus moins la méthode à laquelle je pensais, c'est à dire empiler plusieurs div afin de donner une illusion de volume.

Le background étant le disque noir sous le M

.demo .background4
{
	-webkit-transform: translate3d(0, 0,-3px) rotateX(0deg) rotateY(0deg);
	-moz-transform: translate3d(0, 0,-3px) rotateX(0deg) rotateY(0deg);
	-ms-transform: translate3d(0, 0,-3px) rotateX(0deg) rotateY(0deg);
	transform: translate3d(0, 0,-3px) rotateX(0deg) rotateY(0deg);

}
.demo .background3{
	-webkit-transform: translate3d(0, 0,-2px) rotateX(0deg) rotateY(0deg);
	-moz-transform: translate3d(0, 0,-2px) rotateX(0deg) rotateY(0deg);
	-ms-transform: translate3d(0, 0,-2px) rotateX(0deg) rotateY(0deg);
	transform: translate3d(0, 0,-2px) rotateX(0deg) rotateY(0deg);
}
.demo .background2{
	-webkit-transform: translate3d(0, 0,-1px) rotateX(0deg) rotateY(0deg);
	-moz-transform: translate3d(0, 0,-1px) rotateX(0deg) rotateY(0deg);
	-ms-transform: translate3d(0, 0,-1px) rotateX(0deg) rotateY(0deg);
	transform: translate3d(0, 0,-1px) rotateX(0deg) rotateY(0deg);
}


Je sais pas s'il y a mieux comme méthode car ça reste quand même de la bidouille Smiley ohwell

Je pensais à l'utilisation de sprite sheet mais pour personnalisé par la suite c'est pas super.
Sujet clos
Aller à