悬停时图像翻转只是反映图像，而不是实际翻转

Question

该网站是 3peak.us，我目前正在尝试在页面上均匀地显示 3 个图像翻转 div。我也希望它具有响应性。

我尝试将它们全部放在一个 100% 宽度的 div 中，然后将每个 div 设置为 30%，但它似乎不起作用。当我将它们设为 30% 时，它们将变为实际图像 div 的 30%，而不是整个页面。

这是 div 的 css 编码。

.threeflips {
  width: 100%;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
width: 30%;
float: left;
}

.flip-container:hover .flipper,  
  .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 400px;
height: 400px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

.front {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
transform: rotateY(180deg);

background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}









.bflip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
float: left;
width: 30%;
}

.bflip-container:hover .bflipper,  
  .bflip-container.hover .bflipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.bflip-container, .bfront, .bback {
width: 400px;
height: 400px;
}

.bflipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

.bfront, .bback {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

.bfront {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/2front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}

.bback {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
transform: rotateY(180deg);

background: url(https://www.3peaks.us/wp-content/uploads/2015/09/2back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}






.cflip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
width: 30%;
float: left;
}

.cflip-container:hover .cflipper,  
  .cflip-container.hover .cflipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.cflip-container, .cfront, .cback {
width: 400px;
height: 400px;
}

.cflipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

.cfront, .cback {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

.cfront {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/3front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}

.cback {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
transform: rotateY(180deg);

background: url(https://www.3peaks.us/wp-content/uploads/2015/09/3back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}

这里是html

<div class="threeflips">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
    </div>
    <div class="back">
    </div>
  </div>
</div>


<div class="bflip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="bflipper">
    <div class="bfront">
    </div>
    <div class="bback">
    </div>
  </div>
</div>


<div class="cflip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="cflipper">
    <div class="cfront">
    </div>
    <div class="cback">
    </div>
  </div>
</div>

只要我将 .flip-container、.front .back 更改为 30%，它们就会全部消失。因此，我让它们显示的唯一方法是设置 px 宽度，但它们不再响应。

Answer 1

为什么要将 .front, .back 更改为 30% ？ .front 和 .back 都应该是 100% 宽度，只有 .flip-container 应该是 30% 或 33.33%，具体取决于您的设计

.flip-container {
width: 33.33%;
height: 400px;
}
.front, .back {
width: 100%;
height: 400px;}

因此，将 .flip-container 样式与 .front 和 .back 样式分开，您的代码已根据您的摘要进行了编辑，并可在 codepen here

上找到