有一个包裹div,里面有各种div,其中一些是绝对位置的。
当我将鼠标悬停在wrap div上时,它将使用transformy:rotate(180度)属性翻转,现在div的背面可见。当wrap div翻转时,我想将所有内部元素的颜色改为黑色。
这是我的问题的代码片段。我想把div的颜色(目前是红色)改成其他颜色,当它们的背面是可见的,但一旦他们在原来的位置,他们再次恢复红色。
body {
display: flex;
justify-content: center;
flex-direction: row;
}
.wrap {
display: inline-block;
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.wrap:hover {
transform: rotateY(180deg);
}
.div1 {
display: inline-block;
width: 50px;
height: 60px;
background-color: red;
}
.div1:after {
position: absolute;
content: "9";
top: 2px;
left: 120px;
font-size: 50px;
color: red;
background: red;
}
.div2 {
display: inline-block;
width: 50px;
height: 60px;
background-color: red;
}
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>
最佳答案
想出一个解决办法,希望这就是你想要的
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.wrap {
display: inline-block;
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.wrap:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.wrap:hover .div1, .wrap:hover .div2, .wrap:hover .div1:after {
background-color: #333;
}
.div1 {
display: inline-block;
width: 50px;
height: 60px;
background-color: red;
-webkit-transition: background .2s ease .3s;
transition: background .2s ease .3s;
}
.div1:after {
position: absolute;
content: "";
width: 30px;
height: 60px;
top: 2px;
left: 120px;
font-size: 50px;
color: red;
background: red;
-webkit-transition: all 1s ease;
transition: background .2s ease .3s;
}
.div2 {
display: inline-block;
width: 50px;
height: 60px;
background-color: red;
-webkit-transition: background .2s ease .3s;
transition: background .2s ease .3s;
}
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>