Forum - En vrac ! - Transition image (FLIP 1)

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

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,