.threeDimg {
    --d: 3%; /* the depth */
    --a: 20deg; /* the angle */
    --x: 2%;
    /*width: 250px;*/ /* control the size */
    aspect-ratio: 1.1.1; /* you can use 1 as ratio but I found 1.1 a little better */
    object-fit: cover;
    padding-block: var(--d);
    transform: perspective(800px) rotateY(calc(var(--_i,1)*var(--a)));
    outline: var(--d) solid #0008 0.5;
    outline-offset: calc(-1*var(--d));
    --_d: calc(100% - var(--d));
    --_l: 0px;
    --_r: 0px;
    clip-path: polygon( var(--_l) calc(var(--_d) - var(--x)), var(--_l) calc(var(--d) + var(--x)), var(--d) var(--d),var(--_d) var(--d), calc(var(--_d) + var(--_r)) calc(var(--d) + var(--x)), calc(var(--_d) + var(--_r)) calc(var(--_d) - var(--x)), var(--_d) var(--_d),var(--d) var(--_d) );
    transition: transform .3s,--_r .15s,--_l .15s .15s;
    transition-timing-function: linear;
    cursor: pointer;
}


/* we do a different animation for firefox since it doesn't support @property */
@supports not (-webkit-mask: paint(p)) {
    .threeDimg {
        transition: .3s;
    }
        /*.threeDimg:hover {
    --_i: 0;
    --_l: var(--d);
    --_r: 0px;
  }*/
        .threeDimg:hover {
            --_i: 1;
            --_r: 0px;
        }
}
@media (min-width:1023px) (max-width:1440px) {
    .threeDimg {
        --d: 3%;
        --a: 25deg;
        --x: 2%;
        --_r: 1%;
    }
}
@media (max-width:767px) {
    .threeDimg {
        --d: 3%;
        --a: 30deg;
        --x: 2%;
        --_r: 1%;
    }
}