:root{--p3d:preserve-3d;--pTive:83.33vw}

.bigT,.rF .rC{height:20vw;width:40vw}
.bigT::before,.rF{display:inline-block}
.bigT::before,.rF .rC::before{content:""}

.rF,.rF .rC{position:relative;-webkit-transform-style:var(--p3d);-moz-transform-style:var(--p3d);-ms-transform-style:var(--p3d);-o-transform-style:var(--p3d);transform-style:var(--p3d);-webkit-perspective:var(--pTive);-moz-perspective:var(--pTive);-ms-perspective:var(--pTive);-o-perspective:var(--pTive);perspective:var(--pTive)}
.rF::before,.rF .rG,.rF .rC::before{position:absolute}
.rF .rG{width:10%;height:10%;z-index:1}

.rF .rC{pointer-events:none;overflow:hidden;background:#000 url(https://unsplash.it/800/800/?random);background-size:cover;background-position:center;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0);-ms-transform:rotateX(0) rotateY(0);-o-transform:rotateX(0) rotateY(0);transform:rotateX(0) rotateY(0);-webkit-transition:100ms linear transform;-moz-transition:100ms linear transform;-o-transition:100ms linear transform;transition:100ms linear transform}
.rF .rC::before{background:linear-gradient(rgba(255,255,255,.2),rgba(0,0,0,.2));left:-50%;top:-50%;width:200%;height:200%}

.rF .rg:hover ~ .rC{--rotX:20deg;--rotY:-20deg;-webkit-transform:rotateX(var(--rotX)) rotateY(var(--rotY));-moz-transform:rotateX(var(--rotX)) rotateY(var(--rotY));-ms-transform:rotateX(var(--rotX)) rotateY(var(--rotY));-o-transform:rotateX(var(--rotX)) rotateY(var(--rotY));transform:rotateX(var(--rotX)) rotateY(var(--rotY))}
.rF .rg:nth-child(n+11):hover ~ .rC{--rotX:15deg}.rF .rg:nth-child(n+21):hover ~ .rC{--rotX:10deg}.rF .rg:nth-child(n+31):hover ~ .rC{--rotX:5deg}.rF .rg:nth-child(n+41):hover ~ .rC{--rotX:0deg}.rF .rg:nth-child(n+51):hover ~ .rC{--rotX:-5deg}.rF .rg:nth-child(n+61):hover ~ .rC{--rotX:-10deg}.rF .rg:nth-child(n+71):hover ~ .rC{--rotX:-15deg}.rF .rg:nth-child(n+81):hover ~ .rC{--rotX:-20deg}.rF .rg:nth-child(n+91):hover ~ .rC{--rotX:-25deg}
.rF .rg:nth-child(10n-8):hover ~ .rC{--rotY:-15deg}.rF .rg:nth-child(10n-7):hover ~ .rC{--rotY:-10deg}.rF .rg:nth-child(10n-6):hover ~ .rC{--rotY:-5deg}.rF .rg:nth-child(10n-5):hover ~ .rC{--rotY:0deg}.rF .rg:nth-child(10n-4):hover ~ .rC{--rotY:5deg}.rF .rg:nth-child(10n-3):hover ~ .rC{--rotY:10deg}.rF .rg:nth-child(10n-2):hover ~ .rC{--rotY:15deg}.rF .rg:nth-child(10n-1):hover ~ .rC{--rotY:20deg}.rF .rg:nth-child(10n):hover ~ .rC{--rotY:25deg}
.rF .rg:hover ~ .rC::before{--trY:20%;-webkit-transform:translateY(var(--trY));-moz-transform:translateY(var(--trY));-ms-transform:translateY(var(--trY));-o-transform:translateY(var(--trY));transform:translateY(var(--trY))}
.rF .rg:nth-child(n+11):hover ~ .rC::before{--trY:15%}.rF .rg:nth-child(n+21):hover ~ .rC::before{--trY:10%}.rF .rg:nth-child(n+31):hover ~ .rC::before{--trY:5%}.rF .rg:nth-child(n+41):hover ~ .rC::before{--trY:0%}.rF .rg:nth-child(n+51):hover ~ .rC::before{--trY:-5%}.rF .rg:nth-child(n+61):hover ~ .rC::before{--trY:-10%}.rF .rg:nth-child(n+71):hover ~ .rC::before{--trY:-15%}.rF .rg:nth-child(n+81):hover ~ .rC::before{--trY:-20%}.rF .rg:nth-child(n+91):hover ~ .rC::before{--trY:-25%}