问题标签 [webkit-perspective]

我正在尝试将 youtube 视频安装到手机的显示屏上，但我无法找出完美的值。总有一个不适合的角落。

jsFiddle

如果没有 #layer 的 z-index，您可以清楚地看到左上角不合适。

他们应该做同样的事情对吗？还为孩子设置了 3d 透视图？但是浏览器支持或其他有什么不同吗？

我在构建一个简单的 CSS 过渡时遇到了一个问题。

我有我的body元素，它的唯一子元素是div绝对位置。

在内部，我在悬停伪类div上插入了一个带有简单 3d 过渡的矩形： ，我想在父元素中设置一个样式以使其看起来更好。transform: rotateX(90deg)perspective

当我perspective在 body 中设置 a 时，过渡可以正常工作：它创建了透视效果并且看起来不错。但是 - 问题就在这里 - 孩子失去了绝对位置（至少在 Chrome 中）。

我创建了一个codepen 示例，您可以将body样式注释掉，这将应用绝对位置。

perspective设置时，div它也会失去蓝色背景，但我认为这是因为它的高度变为 0。

这是一个错误吗？我该如何解决？

谢谢

我试图找到一种方法来映射元素，在以给定角度放置的照片元素之上。笔记本电脑的照片就是一个很好的例子，我想在屏幕顶部映射一个元素（视频、图像或其他），例如，让我们循环播放视频等。

这项任务看起来很简单，但我发现它很棘手，因为我找不到如何通过变换旋转、缩放、平移甚至倾斜来正确解决它。

这是我想要实现的代码示例，over 元素是绿色的 SPAN

html:

CSS：

和片段：

我有这个片段，它使用 CSS 将整页<canvas>元素放入 45 度视角。但是，转换后的画布超出了页面的边界并被剪裁：

我如何确保整个画布保持在页面边界内（梯形的底部应该与页面具有完全相同的宽度），同时保持透视效果？CSS 或 JavaScript 解决方案都可以，只要它们适用于任何页面大小。

第一次使用透视图和 translateZ，我遇到了 Safari 的一些问题。

我正在使用代码为我正在构建的网站创建一个简单的视差效果，该网站在 Firefox 和 chrome 中正常工作，但在 safari 中却没有。Safari 似乎正在向应用透视属性的容器底部添加填充，这在其他提到的浏览器上不会发生。

我查看了 safari 的调试工具，看看是否在不应该添加的任何地方添加了任何填充或边距，但似乎并非如此。我将在下面附上我的代码来演示，以及一些期望和不期望行为的图像。

提前喝彩。

期望的行为：

不良行为：

I've discovered this rather strange behavior of perspective in Safari. When using perspective on a transform: rotateY(180deg), the to rotation does not have the perspective applied, but the back rotation does. See the two gifs below:

Behavior on Safari. The first rotation does not have any perspective:

Compared to Firefox, where all rotations have the perspective applied:

The videos as an imgur album in case of problems with the gifs

I am using this piece of SCSS code:

I've already tried numerous slight changes like using -webkit-perspective but with no success.

Here is a codepen containing the code: https://codepen.io/YellowTech/pen/rNmXemj

Am I overlooking something or how can this be fixed?

Thank you!