Anim CSS qui marche sur Firefox mais pas sur IE, Chrome, Safari
walkinpastek
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
J'ai écris un code html et CSS pour que, au survol de la souris, une image se retourne pour dévoiler une autre image. Ca fonctionne bien sur firefox mais pas sur les autres navigateurs. C'est à dire que l'image est affichée mais elle ne tourne pas au survol de la souris, elle reste inchangée.
Je suis vrt débutant dans ce milieu donc si ça se trouve c'est une erreur toute simple.
Je vous copie le code Html et CSS.
Merci infiniment
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="exemple.css" />
<title>Indigo production</title>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="image/1.jpg" alt="logo" title="indigo production" />
</div>
<div class="back">
<img src="image/2.jpg" alt="logo" title="indigo production" />
</div>
</div>
</div>
</body>
</html>
CSS :
body,
html {
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
}
body {
background: #F1F0EB;
color: #000000;
font-family: sans-serif;
font-size: 12px;
line-height: 1.6;
position: fixed;
top: 350px;
left: 600px;
z-index: 999;
}
p:hover /* Apparence au survol des liens */
{
text-decoration: underline;
color: green;
}
p1:hover /* Apparence au survol des liens */
{
text-decoration: underline;
color: green;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 100;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 160px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
J'ai écris un code html et CSS pour que, au survol de la souris, une image se retourne pour dévoiler une autre image. Ca fonctionne bien sur firefox mais pas sur les autres navigateurs. C'est à dire que l'image est affichée mais elle ne tourne pas au survol de la souris, elle reste inchangée.
Je suis vrt débutant dans ce milieu donc si ça se trouve c'est une erreur toute simple.
Je vous copie le code Html et CSS.
Merci infiniment
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="exemple.css" />
<title>Indigo production</title>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="image/1.jpg" alt="logo" title="indigo production" />
</div>
<div class="back">
<img src="image/2.jpg" alt="logo" title="indigo production" />
</div>
</div>
</div>
</body>
</html>
CSS :
body,
html {
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
}
body {
background: #F1F0EB;
color: #000000;
font-family: sans-serif;
font-size: 12px;
line-height: 1.6;
position: fixed;
top: 350px;
left: 600px;
z-index: 999;
}
p:hover /* Apparence au survol des liens */
{
text-decoration: underline;
color: green;
}
p1:hover /* Apparence au survol des liens */
{
text-decoration: underline;
color: green;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 100;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 160px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
A voir également:
- Anim CSS qui marche sur Firefox mais pas sur IE, Chrome, Safari
- Mise a jour chrome - Accueil - Applications & Logiciels
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Telecharger firefox - Télécharger - Navigateurs
- Safari pour windows - Télécharger - Navigateurs
- Google chrome - Télécharger - Navigateurs
2 réponses
Bonjour
tu dois mettre les préfixes
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
ne marche pas pour IE 9 et inférieur
pour cela rajouter le filter matrix
http://www.useragentman.com/IETransformsTranslator/
tu dois mettre les préfixes
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
ne marche pas pour IE 9 et inférieur
pour cela rajouter le filter matrix
http://www.useragentman.com/IETransformsTranslator/
Merci beaucoup, ça marche... presque.
J'ai remplacé ce que tu m'as donné dans la catégorie
.flip-container:hover .flipper, .flip-container.hover .flipper {
Le truc c'est que sous FF ça marche toujours bien mais sous le reste, l'image se retourne sans afficher l'autre image que je veux. La première reste mais est inversée du coup.
Pourtant l'expression
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
devrait cacher la première image non ??
Merci
J'ai remplacé ce que tu m'as donné dans la catégorie
.flip-container:hover .flipper, .flip-container.hover .flipper {
Le truc c'est que sous FF ça marche toujours bien mais sous le reste, l'image se retourne sans afficher l'autre image que je veux. La première reste mais est inversée du coup.
Pourtant l'expression
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
devrait cacher la première image non ??
Merci
