Search code examples
htmlcsscss-transforms

Non-trapezoidal rotate3d video issue

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?

Solution

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