如何在电影选座项目中用CSS实现与示例一致的3D旋转屏幕？

我正在开发一个电影选座项目，需实现一个模拟影院银幕的screen div元素。目前我已编写CSS代码为其添加rotateX变换，但呈现效果与示例屏幕不符，请问该如何调整才能让屏幕效果与示例一致？

示例屏幕效果：

我的代码：

/*this is my code*/
/*<div class="screen"></div>*/
.screen{
  width: 180px;
  height: 100px;
  background-color: whitesmoke;
  border-radius: .3125rem;
  margin-left: 70px;
  /* X-axis - counter-clockwise. */
  transform: rotateX(-20deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
}

当前效果：

你的当前效果核心问题是缺少立体透视支撑，且旋转原点、阴影方向不符合示例要求，按以下调整即可匹配：

• 给.screen的父容器添加perspective属性，提供立体透视视角，让旋转效果呈现近大远小的银幕形态：

  .screen-container {
    perspective: 500px; /* 数值可按需调整，越大透视效果越弱 */
  }
  

• 修改.screen的旋转原点和旋转角度：将transform-origin设为bottom center（让屏幕绕底部中心旋转，符合影院银幕向上翘起的形态），同时把rotateX(-20deg)改为rotateX(20deg)（向上倾斜而非向下翻转）。
• 调整阴影效果：把白色发光阴影改为底部深色投射阴影，模拟银幕在下方区域的投影，示例中阴影应为深色而非亮色。
• （可选）微调border-radius，让银幕顶部的弧度更贴合示例效果。

修改后的完整代码示例：

/* 父容器 */
.screen-container {
  perspective: 500px;
  padding: 20px; /* 按需添加布局间距 */
}

.screen{
  width: 180px;
  height: 100px;
  background-color: whitesmoke;
  border-radius: 0.3125rem 0.3125rem 0 0; /* 顶部圆角，底部无圆角更贴合银幕 */
  margin: 0 auto; /* 居中显示，代替margin-left */
  transform-origin: bottom center;
  transform: rotateX(20deg);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
}

内容的提问来源于stack exchange，提问作者lylyly