html - 对重叠元素应用变换

Question

嘿伙计们，我正在研究转换并在重叠的 div 上测试它们，但我无法让下面的 div 也转换

没有JS可以做到吗？

如您所见，悬停时紫色的 div 变换并消失，我希望它下面的红色 div 也稍微旋转，但我无法让它工作

.container {
  position: relative;
  padding: 2%;
}

.cover {
  position: absolute;
  top: 13px;
  left: 13px;
}
.box1 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: red;
}
.box2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: purple;
  transition: 2s ease-in-out;
}
.box2:hover {
  transform: rotate(35deg);
  transition: 2s ease-in-out;
  border-radius: 50%;
  opacity: 0;
}

<div class="container">
  <div class="top">
    <div class="box1"></div>
    <div class="box1"></div>
  </div>
  <div class="cover">
    <div class="box2"></div>
    <div class="box2"></div>
  </div>
</div>

Answer 1

基于评论的更新，现在使用伪元素而不是双重标记

.container {
  padding: 2%;
}
.box {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
}
.box::before,
.box::after {
  content: ' ';
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 100%;
  transition: 2s ease-in-out;
  background-color: purple;
}
.box::before {
  background: url(http://lorempixel.com/200/200/nature/1);
  background-size: cover;
}
.box:hover::before,
.box:hover::after {
  transform: rotate(35deg);
  transition: 2s ease-in-out;
  border-radius: 50%;
  opacity: 0;
}
.box:hover::before {
  opacity: 0.6;
}

<div class="container">
  <div class="top">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>