非梯形rotate3d视频问题

问题描述

可能我理解错了，但是我在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>

结果：

this

旋转代码：

<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>

结果：

here

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

为什么它不是梯形的？

解决方法

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

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>

css-transforms html

非梯形rotate3d视频问题

问题描述

解决方法

相关问答