CSS3过渡旋转div与背景图像的变化

Question

这个代码依赖链接是我下面的代码所基于的代码。下面是代码

我要做的是调整我的代码，所以当动画div旋转时，我正在使用的背景图像更改为背景颜色。代码使用了5个css3过渡，我的代码也可以在下面找到。

CSS文件

.column {
display: inline-block;
vertical-align: top;
width: 400px;
}
.row {
font-size: 0;
}
.row2 .column {
width: 600px;
}
.row2 .column .hover-img {
height: 400px;
line-height: 400px;
}
.row2 .column .hover-img:hover {
font-size: 28px;
}
.img1 {
background: url(topright.png);
}
.img2 {
background: url(topcenter.png);
}
.img3 {
background: url(topleft.png);
}
.img4 {
background: url(bottomleft.png);
}
.img5 {
background: url(bottomright.png);
}

body {
font-family: Arial, sans-serif;
}
#apDiv7 {
width: 1200px;
background-color: #FFFFFF;
border-radius: 20px;
border: 8px solid #666666;
}
.hover-img {
position: relative;
height: 300px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
margin: 0 auto;
line-height: 300px;
}
.column:hover .hover-img{
-webkit-transform:rotateY(0deg);
font-size:18px;
color:white;
}

HTML

<div id="apDiv7">
<div style="border-radius: 20px;" class="table-wrapper">
<div class="row row1">
  <div class="column">
    <div class="hover-img img1">
      text here 1
    </div>
  </div>
  <div class="column">
    <div class="hover-img img2">
      text here 2
    </div>
  </div>
  <div class="column">
    <div class="hover-img img3">
      text here 3
    </div>
  </div>
</div>
<div class="row row2">
  <div class="column">
    <div class="hover-img img4">
      text here 4
    </div>
  </div>
  <div class="column">
    <div class="hover-img img5">
      text here 5
    </div>
  </div>
</div>
</div>
</div>

Answer 1

我想你应该为每个img类添加一个:hover

的例子:

.img:hover{
    background: red;
}