How do I recreate the Disney Plus / Netflix cover image with CSS?

user_7869175 0
Viewed 216

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/

css-transforms css
1 Answers

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.

user_29461280
Related