2

I have a background image on my website. I want to skew it so that it looks like cover photos on Netflix / Disney Plus (attached below).

Attempt

I tried adding this to my image's CSS, inspired from this question: CSS transform like netflix cover image

transform: rotateY(-30deg) rotateX(40deg) perspective(800px) scale(1.6)

It doesn't produce the desired result, though. Instead it slants incorrectly and doesn't stretch the container entirely.

Code sample

Here is my example: https://jsfiddle.net/gd3wL8nk/11/

Screenshots

Netflix Image

Disney Pllus

Update

I got it to work by adding perspective: 2000px to the containing div, and adding this to the inner div:

transform: rotateY(-20deg) rotateX(20deg) scale(2) translateX(-10%)

My final CSS (with edits for measurement, etc) looked like this:

.container {
  height: 90vh;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  perspective: 2000px;
  height: 900
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 110%;
  background-image: url('image-here');
  background-size: cover;
  transform: rotateY(-20deg) rotateX(20deg) scale(2);
  position: absolute;
  top: -10%;
  left: 0;
  minWidth: 800;
}

See fiddle: https://jsfiddle.net/fernandorojo/kr567zp8/4/

Fernando Rojo
  • 2,633
  • 19
  • 17

1 Answers1

0

You might be looking for transform: skew();!

i.e.

transform: skew(20deg) scale(1.6);

It won't work with both X and Y rotation though. A good method to ensure it's fullscreen is to use the image as a background in an oversized container. For any children items (like the form, if you nest it in the parent div) you will need to apply the opposite skew to ensure it appears without a slant.

If you check the asset Netflix uses, it's been skewed in Photoshop already.

marcx
  • 168
  • 1
  • 8
  • Yeah, I noticed theirs was a skewed raster already. Maybe I'll try to do that (although that's yet another thing to figure out). The reason I wanted to do it in CSS is that I'm hoping to have actual elements there that are animating, rather than just a single static image. Here's another example that does this with CSS (although it appears to be just on one axis): https://storyheap.com/ – Fernando Rojo Jun 09 '21 at 19:04