28172 sujets

CSS et mise en forme, CSS3

[Résolu] Effet "flip"

Bonjour,

Quelqu'un peut-il m'expliquer pourquoi ce sympathique effet flip (que Raphaël connaît bien) et son indispensable "backface-visibility" fonctionne très bien sur Firefox (en tout cas les versions 24.0 et 25.0), mais pas du tout sur Chrome, et encore moins sur IE ? Que faudrait-il faire pour le rendre visible avec les principaux navigateurs ? Mes codes sont les suivants :
HTML5:
<header>
<div id="logo">
	<div class="front"></div>
	<div class="back"></div>
</div>
</header>


et le CSS3:

header{
    margin-bottom:40px;
    width:100px;
    height:100px;
    margin-left:300px;
    -webkit-perspective:500;
    perspective:500;
    }
#logo, #logo>div{
    width:inherit;
    height:inherit;
    -webkit-transition:transform 0.5s ease;
    transition:transform 0.5s ease;
    }
#logo{
    box-shadow:5px 5px 10px;
    border-radius:50%;
    padding:5px;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    }
#logo>div{
    position:absolute;
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;
    }
.front{
    background:url('face.png');
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    transform:rotateY(0deg);
    }
.back {
    background:url('pile.png');
    transform:rotateY(180deg);
    }
header:hover #logo, header:active #logo{
    transform:rotateY(180deg);
    }

Merci pour votre aide...
Déjà une petite piste ... Dans ton css je vois que pour la div .back tu n'utilise pas le -webkit- ni le -moz- ni le -ms-transform... essaie de les appliquer aussi à cette div et peut être que ça pourrait résoudre ton problème...

A savoir que le bacfac-visibility est trés peu supporté par les navigateurs... Seuls IE10+ , Chrome 12+, FireFox 10+ et par safari 4+
Peter-L a écrit :
Déjà une petite piste ... Dans ton css je vois que pour la div .back tu n'utilise pas le -webkit- ni le -moz- ni le -ms-transform... essaie de les appliquer aussi à cette div et peut être que ça pourrait résoudre ton problème...


Tu as raison, je l'ai corrigé... et ça ne marche toujours pas ! Smiley decu
Peter-L a écrit :
A savoir que le bacfac-visibility est trés peu supporté par les navigateurs... Seuls IE10+ , Chrome 12+, FireFox 10+ et par safari 4+


Oui, mais le flip de Raphaël fonctionne bien, sur son site, à lui... Qu'a-t-il fait que je ne fais pas ? Du JavaScript/JQuery très compliqué que je n'aurai même pas le courage de lire ? Dites-moi qu'il y a une autre solution, svp... Smiley decu
Au temps pour moi, j'y suis retourné, et j'ai constaté que le site de l'ami Goetter ne fonctionne pas non plus. Enfin, disons que le 
backface-visibilité:hidden
ne fonctionne pas ! L'effet flip, lui, fonctionne, alors que sur le mien non.
Si au moins on pouvait arriver à ça...
tournikoti a écrit :
Bonjour Markos.

J'ai mis ton code dans jsFiddle et j'ai regardé le code CSS de Raphaël.
Maintenant sous Opera cela fonctionne !

JsFiddle : http://jsfiddle.net/KFSpF/


J'ai recopié le CSS, avec les corrections que tu apportes, mais le résultat avec Chrome est toujours aussi médiocre : Les deux faces sont superposées, et elles s'inversent en miroir au passage de la souris, en d'autres termes : le "backface-visibility:hidden; ne fonctionne pas, puisque les deux faces sont apparentes à l'endroit et à l'envers, et se superposent, mais en outre la transition ne marche pas non plus, puisque l'animation et l'effet de perspective sont absents. Pourtant, la version de Chrome que j'ai est la toute dernière.

J'ai bien peur qu'il ne faille renoncer aux effets "flip" pour les navigateurs autres que Firefox. Je ne comprends pas qu'il n'existe pas de "commentaires conditionnels" pour s'adresser aux différents navigateurs autres que IE, puisque des décalages aussi énormes sont possibles entre Firefox et Chrome (et sans doute Safari). Vive Mozilla Firefox !
Voilà. La transition fonctionne.

Comme d'habitude, l'erreur était une faute d'inattention bête: 
-webkit-transition:transform 0.5s ease;
au lieu de 
-webkit-transition:[b]-webkit-transform[/b] 0.5 ease;
.

Mais la backface-visibility n'est toujours pas gérée par Chrome, pas plus que sur la page d'accueil de Raph. J'en déduis qu'il n'y a pas de meilleure solution.

Merci à tous pour votre contribution !
Bonjour markos.

Non, ce n'est pas une erreur. J'ai vu cela dans le code de Raphaël !

Peux-tu me communiquer tes deux images "Pile.jpg" et "Face.jpg" ?
Cela m'aidera à comprendre le problème car sans image, c'est assez dure d'y voir quelque chose !

Tu dis que cela ne fonctionne pas sous chrome ?
J'ai pourtant visualisé la page de Raphaël avec chrome et je n'ai pas vu de différence avec Firefox.
Je parle du gros rond en haut à gauche, là où il a marqué RG coté recto et coté verso un kiwi décomposé en quatre tranches de quatre couleurs différentes.

J'ai aussi la dernière version de Google Chrome : 30.0.1599.101 m.
Sous Safari version windows, cela ne fonctionne pas !

@+
Je ne sais plus si ce sujet est résolu : je viens de constater que le côté "pile" (class="back") n'existe plus sous Firefox. Les deux faces affichent l'image de "front" ("face"). CSS nous réserve toujours des surprises ! Smiley fache Smiley angry Smiley angryfire . Je vais peut-être rouvrir une autre question...
<H1><a href="http://www.louis-vuitton-handbags.name" title="www.louisvuitton.com"><strong>www.louisvuitton.com</strong></a></H1>
<H1><a href="http://www.michaelkors--outlet.us.com" title="michael kors uk"><strong>michael kors uk</strong></a></H1>
<H1><a href="http://www.coach--factory--outlet.com" title="coach factory outlet online"><strong>coach factory outlet online</strong></a></H1>
<H1><a href="http://www.true-religion-outlet.us" title="true religion"><strong>true religion</strong></a></H1>
<H1><a href="http://www.jordanshoes.us.com" title="air jordan 11"><strong>air jordan 11</strong></a></H1>
<a href="http://www.michael-korsoutlets.us.com"><strong>michael kors outlet online</strong></a>
<a href="http://www.coach--factory--outlet.com"><strong>coach outlet store online</strong></a>
<a href="http://www.louis-vuitton-handbags.cc"><strong>travel bags</strong></a>
<a href="http://www.michaelkorsoutlet-handbags.us"><strong>michael kors outlet</strong></a>
<a href="http://www.chanelsoutletonline.com"><strong>chanel watches</strong></a>
coach factory outlet
michael kors
Oakley Sunglasses Wholesale
coach factory outlet online
louis vuitton uk
http://www.jordanshoes.us.com/
http://www.rayban-sunglasses.name/
Modifié par benshuai (19 Aug 2014 - 10:33)
Sujet clos
Aller à