Non-trapezoidal rotate3d 视频问题

Question

可能我理解错了，但我在 iPhone 中遇到问题，正在测试 .mov 视频的 3d 旋转。

没有旋转的代码：

<html>
<head>
</head>
<body>

<video autoplay loop muted playsinline src="vid.mov" style="position:absolute;top:10px;background:transparent;">Support!</video>

</body>
</html>

结果：

旋转代码：

<html>
<head>
</head>
<body>

<video autoplay loop muted playsinline src="vid.mov" style="position:absolute;top:10px;transform:rotateY(40deg);background:transparent;">Support!</video>

</body>
</html>

结果：

我一直在尝试rotate3d perspective(100px) -webkit-transform - 结果是一样的。

为什么不是梯形？

Answer 1

您需要将视角属性添加到旋转元素的父级。在这种情况下，正文：

body {
    perspective: 1000px;
}

编辑：是的，它也可以应用于元素

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 40px;
}

.panel {
  width: 100%;
  height: 100%;
  background: red;
  /* perspective function in transform property */
  transform: perspective(600px) rotateY(45deg);
}

<div class="scene">
  <div class="panel"></div>
</div>

Non-trapezoidal rotate3d 视频问题

Non-trapezoidal rotate3d video issue

html

css

css-transforms