rotateY() 透视图在 WebKit 上无法正确渲染

Question

问题

我正在尝试使用rotateY()和透视来做一个简单的动画。它在 Chromium 上运行良好，但在移动 Safari 和 Chrome 上运行不佳。我不确定这是否是一个 WebKit 错误，是否有任何解决方法，或者我是否只是遗漏了一些东西。

body {
  background: black;
  padding: 20px;
}

.container {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   perspective: 300px;
}

.border, .door {
   border: 8px solid white;
   width: 120px;
   height: 120px;
   border-radius: 16px;
}

.border {
   position: relative;
}

.door {
   position: absolute;
   top: 0;
   left: 0;
   transform: rotateY(80deg);
   transform-origin: left;
}

<div class="container">
   <div class="border"></div>
   <div class="door"></div>
</div>

Chrome 浏览器上的外观：

它在 Webkit 上的样子：

我尝试过的事情

我尝试过使用其他属性，例如：

• -webkit- 前缀
• 变换风格：preserve-3d
• 透视（）

似乎没有任何效果。

怪异

奇怪的是，当我在 Safari 上检查网页时，浏览器似乎正在识别透视旋转，只是没有将其渲染到屏幕上。看起来像这样：

有什么想法吗？

Answer 1

啊，好吧，我修好了。将所有内容包装在一个新的 div 中并将

overflow: hidden

移动到那里，而不是解决了透视问题。

新代码：

    body {
      background: black;
      padding: 20px;
    }

    .outer-container {
       overflow: hidden;
    }

    .container {
       position: relative;
       border-radius: 16px;
       perspective: 300px;
    }

    .border, .door {
       border: 8px solid white;
       width: 120px;
       height: 120px;
       border-radius: 16px;
    }

    .border {
       position: relative;
    }

    .door {
       position: absolute;
       top: 0;
       left: 0;
       transform: rotateY(80deg);
       transform-origin: left;
    }

    <div class="outer-container">
        <div class="container">
            <div class="border"></div>
            <div class="door"></div>
        </div>
    </div>