css - 使用 css 翻转图像

Question

我有一组图像，我想要的是能够翻转图像。对于图像的正面，它将显示数字（见下图），背面将有一张图片。如果用户点击另一张图片并且它与点击的第一张图片匹配，那么它将在几秒钟后消失。现在我坚持让图像翻转。我将在下面粘贴我的 html 代码和 css。

为了使图像翻转，我尝试使用悬停效果，但这也不起作用

 #flipper:hover {
            transform: rotateY(180deg);
        }

body {
  color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

h2 {
  text-align: center;
}

body {
  background-color: white;
}

img {
  width: 30%;
  float: left;
  margin: 1.66%;
}

p {
  margin-left: 1.66%;
  font-family: "Contrail One", cursive;
  font-size: 35px;
  text-transform: uppercase;
  border-bottom: 2px solid black;
  width: 30%;
  padding-bottom: 20px;
}

div.a {
  text-align: center;
  font-family: sans-serif;
}

#flipper:hover {
  transform: rotateY(180deg);
}

<link href="https://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet">


<div id="flipper">

  <img class="flip" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">
  <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">

  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">

  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">

  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">
  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">

</div>

标签： csshtml

Answer 1

我想一开始，我不知道您是否已经将您编写的 CSS 链接到您的 HTML。我只看到 1 个链接，而不是您的 css。看起来像谷歌字体。

我创建了一个https://codepen.io/robert9111/pen/MzabWZ

    <!-- HTML -->
   <div id="f1_container">
    <div id="f1_card" class="shadow">
      <div class="front face">
        <img class="size" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg/">
      </div>
      <div class="back face center">
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
      </div>
    </div>
    </div>
    <!-- CSS -->
  #f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}

.size {
  width: 450px;
  height: 281px;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  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: #aaa;
}

供您查看。我认为这可能会解决您的问题。

我没有全部做，因为我认为写出一些代码对你有好处。