Template:Tilt/styles.css

.card {
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dcard {
  position: relative;
  display: block;
  perspective: 500px;
}

.tilt {
  width: min-content;
}

.frame {
  background: rgba(0, 0, 0, 0.6);
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.frame:after {
  width: calc(100% - 40px);
  border: 2px dashed rgba(255, 255, 255, 0.5);
  height: calc(100% - 40px);
  content: "";
  display: block;
  left: 20px;
  top: 20px;
  position: absolute;
  transform: translateZ(30px);
}

.trigger {
  position: absolute;
  height: 33.333333%;
  width: 33.333333%;
  display: block;
  z-index: 2;
}
.trigger:nth-child(1) {
  left: 0%;
  top: 0%;
}
.trigger:nth-child(1):hover ~ .card {
  transform: rotateY(8deg) rotateX(-5deg);
}
.trigger:nth-child(2) {
  left: 33.333333%;
  top: 0%;
}
.trigger:nth-child(2):hover ~ .card {
  transform: rotateY(0deg) rotateX(-5deg);
}
.trigger:nth-child(3) {
  left: 66.666666%;
  top: 0%;
}
.trigger:nth-child(3):hover ~ .card {
  transform: rotateY(-8deg) rotateX(-5deg);
}
.trigger:nth-child(4) {
  left: 0%;
  top: 33.333333%;
}
.trigger:nth-child(4):hover ~ .card {
  transform: rotateY(8deg);
}
.trigger:nth-child(5) {
  left: 33.333333%;
  top: 33.333333%;
}
.trigger:nth-child(5):hover ~ .card {
  transform: rotateY(0deg) rotateX(0deg);
}
.trigger:nth-child(6) {
  left: 66.666666%;
  top: 33.333333%;
}
.trigger:nth-child(6):hover ~ .card {
  transform: rotateY(-8deg) rotateX(0deg);
}
.trigger:nth-child(7) {
  left: 0%;
  top: 66.666666%;
}
.trigger:nth-child(7):hover ~ .card {
  transform: rotateY(8deg) rotateX(5deg);
}
.trigger:nth-child(8) {
  left: 33.333333%;
  top: 66.666666%;
}
.trigger:nth-child(8):hover ~ .card {
  transform: rotateY(0deg) rotateX(5deg);
}
.trigger:nth-child(9) {
  left: 66.666666%;
  top: 66.666666%;
}
.trigger:nth-child(9):hover ~ .card {
  transform: rotateY(-8deg) rotateX(5deg);
}