html - 翻转一个 div 并在翻转时更改内部 div 的颜色？

Question

有一个wrap div，里面有各种div，其中一些是绝对位置。

当我将鼠标悬停在 Wrap div 上时，使用 transformY: rotate(180deg) 属性将其翻转，现在 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>

Answer 1

想出了一个解决方案，希望这是你想要的

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>