how to flip the div using css?

后端未结

关注

 4  2031

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 fidd

相关标签:

4条回答

太阳男子

2021-01-24 23:05

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>

0 讨论(0)

悲&欢浪女

2021-01-24 23:08

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

0 讨论(0)

轮回少年

2021-01-24 23:11

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/

0 讨论(0)

情歌与酒

2021-01-24 23:18
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
0 讨论(0)
发布评论:

提交评论
- 加载中...