如何使用 CSS 翻转 div

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

https://jsfiddle.net/d13cead3/

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

您可以尝试使用链接到的示例中的所有必要部分。我对其进行了一点更新以更贴近您的示例：

捷轩

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

希望这有帮助！

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

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

不知道为什么这个问题有jQuery标签，在这种情况下，使用css进行悬停功能肯定是可取的。

在我使用关键帧的代码笔链接中，您只需要更改以下内容：

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

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

你也可以稍微玩一下转换原点属性，我还没有默认的。

链接到笔

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

相关内容

最新更新

热门标签：