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); }