0

Probably I understand things wrong, but I am facing an issue in my iPhone, testing 3d rotation of .mov video.

Code without rotation:

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

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

</body>
</html>

Result:

enter image description here

Code with rotation:

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

Result:

enter image description here

I have been trying rotate3d perspective(100px) -webkit-transform - the result is the same.

Why it is not trapezoidal?

Artur
  • 325
  • 2
  • 16

1 Answers1

0

You need to add the perspective property to the parent of the element that is rotated. In this case, the body:

body {
    perspective: 1000px;
}

Edit: Yeah it can also be applied to the element

.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>
dantheman
  • 3,189
  • 2
  • 10
  • 18
  • Yeah, `transform:perspective(1000px) rotateY(40deg);` works, thanks. Earlier, seems, I wrote it separately. – Artur Sep 06 '20 at 11:38