CSS/JS - 打开扇形效果

Question

我正在尝试使用 css 复制风扇打开的效果。我已经设法通过使用transform-origin 和transform: rotate() 为一个“面板”实现了这一目标，但是我正在努力让第三个“面板”工作。目前我写的代码如下：

看看橙色元素如何与蓝色对齐，红色应该以相同的方式表现（相对于橙色）。

html,
body {
  margin: 0;
  padding: 0;
}

div {
  height: 100vh;
}

.right {
  position: fixed;
  width: 50vw;
  background: blue;
  right: 0;
  z-index: 1;
}

.middle {
  position: fixed;
  background: orange;
  width: 25vw;
  right: 50vw;
  top: 0;
  transform-origin: top right;
  transform: rotate(-10deg);
}

.left {
  position: fixed;
  background: red;
  width: 25vw;
  left: 0;
  top: 10%;
  transform-origin: bottom center;
  transform: rotate(-20deg);
}

<div class="right"></div>
<div class="fan">
  <div class="left"></div>
  <div class="middle"></div>
</div>

Answer 1

将您的 .left 类更改为以下内容：

position: fixed;
background: red;
width: 25vw;
top: 10%;
transform-origin: top right;
transform: rotate(-20deg);
right: 75vw;