css3 flip div

[jimbo0]

salve, posto qui perché non ho ben capito se c'è bisogno di js o no per realizzare questo (il primo esempio per la precisione)
http://css3.bradshawenterprises.com/flip/#flip
probabilmente si, qualcuno sa spiegarmi come realizzare questo effetto in modo che sia il più possibile compatibile con tutti i browser?

[deleted_20210415]

Aggiungi agli attributi transform, backface e preserve-3D i suffissi dei diversi browser, similmente a ciò

-webkit-property: ...;
-moz-property: ...;
-o-property: ...;
-ms-property: ...;

[jimbo0]

facile a dirsi puoi essere un po' più specifico?

[deleted_20210415]

#f1_container {
  position: relative;
  margin:10pxauto;
  width:450px;
  height:281px;
  z-index:1;
}
#f1_container {
  perspective:1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  -o-perspective: 1000;
}
#f1_card {
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transition: all 1.0s linear;
  -webkit-transition: all 1.0s linear;
  -moz-transition: all 1.0s linear;
  -ms-transition: all 1.0s linear;
  -o-transition: all 1.0s linear;

}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  box-shadow:-5px5px5px#aaa;
  -webkit-box-shadow: -5px 5px 5px #aaa;
  -moz-box-shadow: -5px 5px 5px #aaa;
  -ms-box-shadow: -5px 5px 5px #aaa;
  -o-box-shadow: -5px 5px 5px #aaa;

}
.face {
  position: absolute;
  width:100%;
  height:100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;

}
.face.back {
  display: block;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  box-sizing: border-box;
  padding:10px;
  color: white;
  text-align: center;
  background-color:#aaa;
}

Mo' paghi una birra però :P

[jimbo0]

grazie mille! ho notato che però su IE10 il front div ruota, ma non appare il back..
in fondo all'articolo parla di plugin jquery e modernizr..
e tra i commenti si legge

IE10 doesn't support the preserve-3d property. From http://msdn.microsoft.com/en-u... it says: "At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.". I haven't had a lot of luck doing that, but I think if you add the perspective value to every element involved, it might work. I'm not planning to fix my demo, as they need to implement the spec completely. Hopefully IE11 will add support for this.

anche sacrificando l'effetto, è possibile fare in modo che sia accessibile da IE? anche solo nascondendo il front div e mostrando il back, senza alcuna rotazione..