como virar o div usando css?

Estou a tentar inverter o mergulhador ..Eu tomo a ajuda deste exemplo http://css3.bradshawenterprises.com/flip/ Mas mesmo assim não sou capaz de virar o meu div em hover ..aqui está o meu violino.

Https://jsfiddle.net/d13cead3/

.front{
  width: 100%;
  height: 100%;
  background-color:red;
}
.front:hover {
  transform: rotateY(180deg);
}

#container{
   perspective: 1000;
    width:200px;
    height:200px;
}

#innercontainer{
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 5.0s linear;
}

.back{
   width: 100%;
  height: 100%;
  background-color:blue;
}
Author: user5711656, 2016-01-17
Source

4 answers

Pode tentar usar todas as peças necessárias do exemplo a que se ligou. Actualizei-o um pouco para corresponder melhor ao seu exemplo:

JSBIN

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="innercontainer">
  <div class="front face">
    FRONT
  </div>
  <div class="back face">
    BACK
  </div>
</div>
</div>
</body>
</html>

CSS

.container {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 200px;
  z-index: 1;
  perspective: 1000;
}
.innercontainer {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.container:hover .innercontainer {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #00F;
}
.face.front{
  background-color: #F00;
  color: #FFF;
  text-align: center;
  padding: 10px;
}
 2
Author: J. Titus, 2016-01-17 01:13:17
Diz que precisas de adicionar transition: all 1.0s linear; ao conteúdo animável e não ao recipiente. Esqueceste-te de adicionar a transição. Adicione o seguinte CSS para conseguir isso: 
* {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

Excerto De Trabalho

* {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.front {
  width: 100%;
  height: 100%;
  background-color: red;
}
.front:hover {
  transform: rotateY(180deg);
}
#container {
  perspective: 1000;
  width: 200px;
  height: 200px;
}
#innercontainer {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 5.0s linear;
}
.back {
  width: 100%;
  height: 100%;
  background-color: blue;
}
<div id='container'>
  <div id='innercontainer'>
    <div class='front'>
      front
    </div>
    <div class='back'>
      back
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/eb60k41c/

 0
Author: Praveen Kumar Purushothaman, 2016-01-17 00:57:21
Espero que isto ajude! 

#container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}

#container {
  perspective: 1000;
}
#innercontainer {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#container:hover #innercontainer {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: blue;
}
.front {
  background-color: red;
}
<div id="container">
  <div id="innercontainer" class="shadow">
    <div  class="front face">
    front
    </div>
    <div  class="back face ceneter">
      back
    </div>
  </div>
</div>
 0
Author: SagarB, 2016-01-17 01:39:47
Tenho algo assim com uma explicação passo a passo.

Não sei por que esta pergunta tem a tag jQuery, é certamente muito preferível usar css para apenas funcionalidade hover neste caso.

Na ligação do codepen que estou a usar os keyframes, tudo o que terias de mudar é o seguinte: 

.card:hover {transform:rotateX(180deg);

Vá para a linha 15 e coloque isso, sobrepondo a "animação: animação 30 infinitos;"

Também podes brincar um pouco com a propriedade transformar origem, Eu Não tenho por defeito.

Ligação à caneta

Http://codepen.io/damianocel/pen/QjZGjV

 0
Author: damiano celent, 2016-01-17 02:10:39