How to position element in the correct 3d position with css perspective | بلاگ

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

تعرفه تبلیغات در سایت

آخرین مطالب

امکانات وب

Vote count: 0

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 element (video, image, or other) on top of the screen, for example, let's say to loop a video etc.

The task seemed quite easy but I'm finding it quite tricky, because I couldn't find how to solve it properly with transforms rotate, scale, translate and even skew.

enter image description here

Here's a code example of what I want to achieve, the over element is the SPAN coloured green

Html:

    


  
  
  JS Bin

   


        


        

  

css:

div {
  position: relative;
}
span {
  background: green;
  width: 350px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  perspective: 250px;
  transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
  opacity: 0.5;
}
img {
  width: 500px;
  height: auto;
}

And the snippet:

div {
  position: relative;
}
span {
  background: green;
  width: 350px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  perspective: 250px;
  transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
  opacity: 0.5;
}
img {
  width: 500px;
  height: auto;
}



  
  
  JS Bin

   


        


        

  
asked 39 secs ago
punkbit

...
نویسنده : استخدام کار بازدید : 10 تاريخ : چهارشنبه 25 بهمن 1396 ساعت: 5:54