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><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JS Bin</title></head><body><divclass="container"><divclass="innercontainer"><divclass="front face">
    FRONT
  </div><divclass="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: -5px5px5px#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: -5px5px5px#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;
}
<divid="container"><divid="innercontainer"class="shadow"><divclass="front face">
    front
    </div><divclass="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;
}
<divid='container'><divid='innercontainer'><divclass='front'>
      front
    </div><divclass='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?"