0

そのため、この一連のコードにしばらく苦労しており、完成に近づいています。

最初の問題は、画像を高さと幅に反応させることでしたが、いくつかの議論の後、コードを簡素化し、色をプレースホルダーとして使用することで反応させる方法を理解することができましたが、今では再追加する方法がわかりません.背景画像。

これがOGコードペンです。http://codepen.io/anon/pen/YypXjw

そして今ここにあります、http://codepen.io/anon/pen/rOWXzW

* { color: #fff; }

.flip-container {
width: 33.333%;
padding-bottom: 33.333%;
float: left;
}

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

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

.front {
position: absolute;
width: 100%;
padding-bottom: 100%;
}

.front-a {
background: red;
}

.front-b {
background: blue;
}

.front-c {
background: green;
}

htmlも表示できない理由がわかりません。

コードがクリーンアップされたので、あとはフリップ div に表と裏の画像を追加する方法だけです。

og コードのように前後の div を追加しようとしましたが、まだ機能しません。

どんな助けや提案も大歓迎です。

4

1 に答える 1

1

コデペン

フロント クラスとバック クラスの div が必要です。疑似セレクターを使用して、それぞれの前面/背面をターゲットにすることができます。

<div class="flip-container">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

背景サイズの表紙と、それぞれの表/裏の画像。

.front, .back {
  background-size: cover;
}

.flip-container:nth-of-type(1) .front {
  background-image: url(image.jpg);
}

.flip-container:nth-of-type(1) .back {
  background-image: url(image.jpg);
}
于 2015-10-06T18:32:55.240 に答える