Question

此codepen链接是我的代码所基于的代码。 Here is the code

我想要做的是调整我的代码，以便当动画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;
}

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

1 个答案: