div {
  transform:
    perspective(75em)
    rotateX(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
}

div {
  transform: perspective(1500px) rotateY(15deg);
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: transform 1s ease 0s;

  &:hover {
    transform: perspective(3000px) rotateY(5deg);
  }
}

div {
  transform:
    rotate3d(.5,-.866,0,15deg)
    rotate(1deg)
  box-shadow:
    2em 4em 6em -2em rgba(0,0,0,.5),
    1em 2em 3.5em -2.5em rgba(0,0,0,.5);
  transition:
    transform .4s ease,
    box-shadow .4s ease;
  border-radius: .5em;

  &:hover {
    transform:
      rotate3d(0,0,0,0deg)
      rotate(0deg);
  }
}

div {
  transform:
    perspective(800px)
    rotateY(-8deg);
  transition: transform 1s ease 0s;
  border-radius: 4px;
  box-shadow:
    rgba(0, 0, 0, 0.024) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 0px 0px,
    rgba(0, 0, 0, 0.03) 0px 0px 8px 0px,
    rgba(0, 0, 0, 0.1) 0px 20px 30px 0px;

  &:hover {
    transform: perspective(800px) rotateY(-4deg);
  }
}

div {
  transform:
    perspective(1000px)
    rotateX(4deg)
    rotateY(-16deg)
    rotateZ(4deg);
  box-shadow: 24px 16px 64px 0 rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

div {
  transform:
    rotateX(51deg)
    rotateZ(43deg);
  transform-style: preserve-3d;
  border-radius: 32px;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    .4s ease-in-out transform,
    .4s ease-in-out box-shadow;

  &:hover {
    transform:
      translate3d(0px, -16px, 0px)
      rotateX(51deg)
      rotateZ(43deg);
    box-shadow:
      1px 1px 0 1px #f9f9fb,
      -1px 0 28px 0 rgba(34, 33, 81, 0.01),
      54px 54px 28px -10px rgba(34, 33, 81, 0.15);
  }
}

div {
  transform:
    perspective(2000px)
    translate3d(0px, -66px, 198px)
    rotateX(-55deg)
    scale3d(0.86, 0.75, 1)
    translateY(50px);
  border-radius: 5px;
  will-change: transform;
  transition: 0.4s ease-in-out transform;

  &:hover {
    transform: scale3d(1, 1, 1);
  }
}

div {
  transform:
    perspective(750px)
    translate3d(0px, 0px, -250px)
    rotateX(27deg)
    scale(0.9, 0.9);
  border-radius: 20px;
  border: 5px solid #e6e6e6;
  box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
  transition: 0.4s ease-in-out transform;

  &:hover {
    transform: translate3d(0px, 0px, -250px);
  }
}

div {
  transform:
    perspective(600px)
    rotateX(20deg);
  border-radius: 6px;
}

div {
  transform:
    perspective(900px)
    rotateX(60deg)
    scale(0.7);
  box-shadow: 0px 20px 100px #555;
  transition:0.5s ease all;

  &:hover {
    transform:
      rotate(0deg)
      scale(1)
      translateY(10px);
  }
}

div {
  transform:
    scale(0.75)
    rotateY(-30deg)
    rotateX(45deg)
    translateZ(4.5rem);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.25);
  transition: 0.6s ease transform;

  &:hover {
    transform: scale(1);
  }

  &::before {
    transform: translateZ(4rem);
    &:hover {
      transform: translateZ(0);
    }
  }

  &::after {
    transform: translateZ(-4rem);
    &:hover {
      transform: translateZ(-1px);
    }
  }
}

div {
  border-radius: 1em;
  perspective: 600px;
  box-shadow:
    0 0.125em 0.3125em rgba(0, 0, 0, 0.25),
    0 0.02125em 0.06125em rgba(0, 0, 0, 0.25);

  &::before {
    border-radius: 0 0 1em 1em;
    width: 100%;
    height: 50%;
    transform-origin: center top;
    transform: rotateX(180deg);
    background: #333232
      linear-gradient(180deg,
                      rgba(0, 0, 0, 0.1) 50%,
                      rgba(0, 0, 0, 0.4));
    transition: 0.7s ease-in-out transform;
  }

  &:hover::before {
    transform: rotateX(0);
  }
}

div {
  transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  filter: blur(2px);
  opacity: 0.5;
  transition: 0.6s ease all;

  &:hover {
    transform:
      perspective(800px)
      rotateY(-15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
    filter: blur(0);
    opacity: 1;
  }
}