Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery

How To Flip The Div Using Css?

Post a Comment
I am trying to flip the div on hover ..I take help from this example http://css3.bradshawenterprises.com/flip/ But still I am not able to flip my div on hover ..here is my fiddle

Solution 1:

You could try using all the necessary pieces from the example you linked to. I updated it a bit to more closely match your example:

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;
}

Solution 2:

Hope this helps!

#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>

Solution 3:

It says you need to add transition: all 1.0s linear; to the animateable content and not the container. You forgot to add the transition. Add the following CSS to achieve that:

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

Working Snippet

* {
  -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/


Solution 4:

I have something like that with a step by step explanation.

Not sure why this question has the jQuery tag, it's sure much preferable to use css for just hover functionality in this case.

In the codepen link i am using keyframes, all you would have to change is the following:

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

Go to line 15 and put that in, overwriting the "animation: animation 30s infinite;"

You can also play around with the transform origin property a bit, I haven't got it on default.

Link to the pen

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


Post a Comment for "How To Flip The Div Using Css?"