CSS tile flip on hover

Question

I have some Div Boxes how can i get them flipped on hover? I tried already some examples i found but i cant get it working? Can someone please help me?

 .kachel_a_image_1 { height:150px; width:150px; margin:auto auto; margin-top:15px; background:red; } .kachel_wrapper { margin: auto auto; width: 90%; min-height: 450px; margin-top: 55px; text-align: center; padding:10px; padding-top:30px; padding-bottom:20px; } .kachel_text { font-size:10px; color:white; line-height:15px; text-align:center; } .kachel { height: 180px; width: 180px; margin-top: 20px; margin-left: 58px; background: #6e7176; display: inline-block; margin-bottom:30px; } 

 <div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div> 

I only want to use Css and no JS if its possible. Can someone explain me how this works or giving me a really simple example :S ?

Answer 1

Use transform :

.kachel:hover{
    transform: rotateX(150deg);
} 

more Information: http://www.w3schools.com/css/css3_3dtransforms.asp

Also if you want to add a duration to the animation use transition-duration

.kachel{
    transition-duration: 5s;
}

for changing the content after the hover use the pseudo element :after and the attribute content .
For example:

.kachel:hover:after{
    content: 'hovering';
} 

You may have to change it a bit, i haven't tested it.

Answer 2

Using transition and backface-visibility .

Probably the best soultion is to use simple transform and backface-visibility . jsfiddle

 .front, .back{ width: 100px; height: 100px; } .front{ background-color: blue; } .back{ background-color: red; background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-ck-no/photo.jpg"); background-size: cover; } /* entire container, keeps perspective */ .flip-container { perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 100px; height: 100px; } /* 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; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } 

 <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> </div> <div class="back"> </div> </div> </div> 

Using @-webkit-keyframe

Another approach is to use animation and @-webkit-keyframes . However this will run the animation one time initially. ( jsfiddle )

 .box, .wrapper { width: 100px; height: 100px; position: absolute; } .back { transform: rotateY(90deg); background-color: red; -webkit-animation: in 0.2s forwards; animation in 1s forwards; -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */ animation-delay: 0.2s; } .front { transform: rotateY(90deg); background-color: blue; -webkit-animation: out 0.2s forwards; animation out 0.2s forwards; background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-ck-no/photo.jpg"); background-size: cover; } .wrapper:hover .box.back { -webkit-animation: out 0.2s forwards; animation: out 0.2s forwards; } .wrapper:hover .box.front { -webkit-animation: in 0.2s forwards; animation: in 0.2s forwards; -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */ animation-delay: 0.2s; } @-webkit-keyframes in { from { -webkit-transform: rotateY(90deg); } to { -webkit-transform: rotateY(0deg); } } @-webkit-keyframes out { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(90deg); } } 

 <div class="wrapper"> <div class="box back"></div> <div class="box front"></div> </div> 

Answer 3

For this I would use backface-visibility in conjunction with transform

<div class="container">
    <div class="box front">image</div>
    <div class="box back">Social</div>
</div>

CSS:

.container {
  width: 180px;
  height: 180px;
  position: relative;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
  background: red;
  z-index: 2;
}

.back {
  z-index: 1;
  background-color: green;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  color:white;
}

.container:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

Here's a JS fiddle

EDIT: The above fiddle has been edited to have an outer wrapper which initiates the flip. This ensures that the animation doesn't jitter.

.wrapper {
    width: 180px;
}
.wrapper:hover .container {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}