.threeDimg {
  --d: 10px;  /* the depth */
  --a: 20deg; /* the angle */
  
  /* the below value is based on the depth and the angle.
     the formula is a bit difficult to express so we update it manually
  */
  --x: 10px;
  
  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;
}
/*.threeDimg:hover,
.threeDimg{
  --_l: var(--d);
  --_r: var(--d);
  --_i: -1;
  transition-delay: 0s,.15s,0s;
}
.threeDimg:hover {
  --_l: 0px;
  --_r: 0px;
  --_i: 1;
  transition-delay: 0s,0s,.15s;
}*/

/* 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 (max-width:770px) {
  .threeDimg{
     --d: 3px; 
     --a: 30deg;
     
  }
  
}