Question

我试图在悬停时翻转div ..我从这个例子中获得帮助 http://css3.bradshawenterprises.com/flip/ 但是我仍然无法在悬停时翻转我的div。这是我的小提琴

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

Answer 1

您可以尝试使用链接到的示例中的所有必要部分。我更新了一下，以便更贴近您的示例：

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

Answer 2

它表示您需要将transition: all 1.0s linear;添加到可动画内容而不是容器中。你忘了添加过渡。添加以下CSS来实现：

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

工作代码段

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

小提琴：https://jsfiddle.net/eb60k41c/

Answer 3

希望这有帮助！

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

Answer 4

我有类似的东西，一步一步解释。

不确定为什么这个问题有jQuery标记，在这种情况下，确实更喜欢使用css来悬停功能。

在我使用关键帧的codepen链接中，您需要更改的内容如下：

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

转到第15行并将其放入，覆盖“动画：动画30s无限;”

你也可以稍微使用transform origin属性，我没有默认设置。

链接到笔

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

如何使用CSS翻转div？

4 个答案: