How to position element in the correct 3d position with css perspective

Question

I\'m trying to find a way to map an element, on top of a photo element that is placed at a given angle. The photo of a laptop is a good example, where I\'d like to map an elemen

Answer 1

perspective needs to be added to the parent, not to the child. The rest are details:

span {
  background: green;
  width: 256px;
  height: 176px;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(1deg) rotateY(-7deg) rotateZ(-1deg) skew(-11.25deg, 1.5deg) translate(233px, 37px);
  opacity: 0.5;
}

div {
  position: relative;
  perspective: 400px;
  width: 1200px;
}

img {
  width: 500px;
  height: auto;
}

body {
  overflow-x: hidden;
}

<div>
  <span></span>
  <img src="https://i.stack.imgur.com/iL2xf.png" />
</div>