Match image perspective With css 3D transform

Question

Looking for a way to match an IMG perspective with css properties (rotate 3D, Skew...). Here is my current image, and I Want my Div to fit the perspective of the screen. Sometimes I did it approximatively, but on windows Resize, everithing is messed up :(

Do you know how can I do It to keep it working even after a window resize and perfectly match ? Saw something about matrix, is it the good way ? Is there a tool to identify perspective on image ?

Thanks for help.

Here is exemple of my code. I'm using a Div for the exemple, but It will be a photo, so I need to have a real perspective

* {
  box-sizing: border-box;
}

.surfacemockup {
  width: 100%
}

.surfacecontainer {
  width: 100%;
  perspective: 8000px;
  perspective-origin: 50% 50%;
  margin: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.perspectivesurface {
  width: 100%;
  height: 100%;
}

.photo-perspective {
  width: 50%;
  left: 32.3%;
  height: 33.3%;
  top: 24.3%;
  display: flex;
  position: absolute;
  background: red;
  transform-origin: top left;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
}

<div class="surfacecontainer">
  <div class="photo-perspective">
  </div>
  <img src="https://drive.lucasarts.fr/users/uploads/Match.JPG" class="surfacemockup">
</div>

score 0 · Answer 1 · answered Mar 29 '21 at 13:04

0

You can fake it with clip-path:

.surfacecontainer {
  width: 100%;
  margin: auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.photo-perspective {
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
  clip-path:polygon(24% 7%,88% 19%,74% 94%,5% 61%);
  background:url(https://picsum.photos/id/1014/800/800) center/cover;
}


img {
  display:block;
  width:100%;
}

<div class="surfacecontainer">
  <div class="photo-perspective"></div>
  <img src="https://drive.lucasarts.fr/users/uploads/Match.JPG" class="surfacemockup">
</div>

answered Mar 29 '21 at 13:04

Temani Afif

211,628
17
234
311

Thanks for clip-path, but inside the div, I will add picture (photos), and with Clip path, perspective is not working (like photo on your post) – Lucas Mar 29 '21 at 13:09
@Lucas my solution no more rely on perspective. I am faking the perspective with clip-path so you no more need to do any transformation – Temani Afif Mar 29 '21 at 13:11
Thank you. I know, but I need this perspective for futur. I use Div in exemple, but it Will be a picture – Lucas Mar 29 '21 at 13:16
@Lucas wait for more answers ;) – Temani Afif Mar 29 '21 at 13:19
Yes, Thank you for your help ! It can be usefull in my other project ;) – Lucas Mar 29 '21 at 13:21

Match image perspective With css 3D transform

1 Answers1

Linked