Forum - En vrac ! - Transition image (FLIP 1)
le 30/04/2016 @ 17:56
par Jiji
Bonjour à vous et bravo pour vos informations
Je ne suis pas très spécialiste, et je n'arrive pas à mettre en place une image avec flip 1. J'ai ce code dans mon style plus.css
#f1_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background: transparent;
border:1px solid #cccccc;
border-radius:30px;
}
#f1_container {
perspective: 500px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaaaaa;
}
.front.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back.face.center {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #000000;
text-align: center;
background-color: #fffdfd;opacity:0.2;
border-radius:30px;
}
Impossible en modifiant les réglage opacity et les fonctions color et background de supprimer cet effet de transparence
Ce que je souhaiterai c'est d'avoir un retournement de l'image sans voire la transparence, comme ce que vous avez mis sur votre site.
Je fonctionne sous IE et Fizella
cordialement
Jiji
--------
le 30/04/2016 @ 23:06
par JeanDenis
Administrateur
Bonsoir,
Merci pour tes commentaires.
Pour l'effet de transparence, tu as deux solutions, soit supprimer opacity et laisser cela :
background-color: #fffdfd;
ou alors mettre opacity à 1
background-color: #fffdfd;opacity:1.0;
Normalement, cela fonctionne .
PS : Attention, si tu reprends le code indiqué, modifie : tu as écrit :
.front.face {
et
.back.face.center {
Or, c'est
.face {
et
.face.back {
Sauf à modifier l'appel à ces règles dans le corps de l'article.
Cordialement,
Rectifier message Clôturer sujet Remonter