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

    نویسنده : استخدام کار بازدید : 6 تاريخ : چهارشنبه 25 بهمن 1396 ساعت: 5:54
    برچسب‌ها :
    اخبار و رسانه هاهنر و ادبیاترایانه و اینترنتعلم و فن آوریتجارت و اقتصاداندیشه و مذهبفوتو بلاگوبلاگ و وبلاگ نویسیفرهنگ و تاریخجامعه و سیاستورزشسرگرمی و طنزشخصیخانواده و زندگیسفر و توریسمفارسی زبان در دیگر کشورها