Perspective CSS hover effect

Developer
Rune Sejer Hoffmann
Size
7,424 Kb
Views
6,072
  1. Perspective CSS hover effect Previews
  2. Perspective CSS hover effect HTML Codes
  3. Perspective CSS hover effect CSS Codes
  4. Perspective CSS hover effect JS Codes

How do I make an perspective css hover effect?

Experimental pure CSS hover effect to gain the perspective effect you normally would achieve with JS. i used alot of divs maybe the number could be smaller. What is a perspective css hover effect? How do you make a perspective css hover effect? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

Perspective CSS hover effect Previews
IQ Test

Perspective CSS hover effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perspective CSS hover effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='wrapper'> <div class='container'> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='top'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='middle'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='bottom'></div> <div class='card'> <div class='overlay'> <h3> 404 </h3> <p> The page you are looking for does not exist, it may have been moved, or removed altogether. You might want to try the search function. Alternatively, return to the front page. </p> <div class='btn'> home </div> <div class='error'></div> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Perspective CSS hover effect - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700);
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box;
}
body { background: #54555D; font-family: 'Quicksand', sans-serif;
}
.wrapper { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.wrapper .container { height: 320px; width: 600px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1200px; perspective: 1200px;
}
.wrapper .container .top:nth-child(1):hover ~ .card { -webkit-transform: rotateY(-9.24deg) rotateX(8deg); transform: rotateY(-9.24deg) rotateX(8deg); box-shadow: 49.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(1):hover ~ .card .overlay:before { -webkit-transform: translate(-180px, -60px) rotate(30deg); transform: translate(-180px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(1):hover ~ .card .error { -webkit-transform: translate(-14px, -4px); transform: translate(-14px, -4px);
}
.wrapper .container .middle:nth-child(31):hover ~ .card { -webkit-transform: rotateY(-9.24deg); transform: rotateY(-9.24deg); box-shadow: 49.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(31):hover ~ .card .overlay:before { -webkit-transform: translate(-180px) rotate(30deg); transform: translate(-180px) rotate(30deg);
}
.wrapper .container .middle:nth-child(31):hover ~ .card .error { -webkit-transform: translate(-14px); transform: translate(-14px);
}
.wrapper .container .bottom:nth-child(61):hover ~ .card { -webkit-transform: rotateY(-9.24deg) rotateX(-8deg); transform: rotateY(-9.24deg) rotateX(-8deg); box-shadow: 49.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(61):hover ~ .card .overlay:before { -webkit-transform: translate(-180px, 60px) rotate(30deg); transform: translate(-180px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(61):hover ~ .card .error { -webkit-transform: translate(-14px, 4px); transform: translate(-14px, 4px);
}
.wrapper .container .top:nth-child(2):hover ~ .card { -webkit-transform: rotateY(-8.58deg) rotateX(8deg); transform: rotateY(-8.58deg) rotateX(8deg); box-shadow: 46.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(2):hover ~ .card .overlay:before { -webkit-transform: translate(-170px, -60px) rotate(30deg); transform: translate(-170px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(2):hover ~ .card .error { -webkit-transform: translate(-13px, -4px); transform: translate(-13px, -4px);
}
.wrapper .container .middle:nth-child(32):hover ~ .card { -webkit-transform: rotateY(-8.58deg); transform: rotateY(-8.58deg); box-shadow: 46.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(32):hover ~ .card .overlay:before { -webkit-transform: translate(-170px) rotate(30deg); transform: translate(-170px) rotate(30deg);
}
.wrapper .container .middle:nth-child(32):hover ~ .card .error { -webkit-transform: translate(-13px); transform: translate(-13px);
}
.wrapper .container .bottom:nth-child(62):hover ~ .card { -webkit-transform: rotateY(-8.58deg) rotateX(-8deg); transform: rotateY(-8.58deg) rotateX(-8deg); box-shadow: 46.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(62):hover ~ .card .overlay:before { -webkit-transform: translate(-170px, 60px) rotate(30deg); transform: translate(-170px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(62):hover ~ .card .error { -webkit-transform: translate(-13px, 4px); transform: translate(-13px, 4px);
}
.wrapper .container .top:nth-child(3):hover ~ .card { -webkit-transform: rotateY(-7.92deg) rotateX(8deg); transform: rotateY(-7.92deg) rotateX(8deg); box-shadow: 43.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(3):hover ~ .card .overlay:before { -webkit-transform: translate(-160px, -60px) rotate(30deg); transform: translate(-160px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(3):hover ~ .card .error { -webkit-transform: translate(-12px, -4px); transform: translate(-12px, -4px);
}
.wrapper .container .middle:nth-child(33):hover ~ .card { -webkit-transform: rotateY(-7.92deg); transform: rotateY(-7.92deg); box-shadow: 43.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(33):hover ~ .card .overlay:before { -webkit-transform: translate(-160px) rotate(30deg); transform: translate(-160px) rotate(30deg);
}
.wrapper .container .middle:nth-child(33):hover ~ .card .error { -webkit-transform: translate(-12px); transform: translate(-12px);
}
.wrapper .container .bottom:nth-child(63):hover ~ .card { -webkit-transform: rotateY(-7.92deg) rotateX(-8deg); transform: rotateY(-7.92deg) rotateX(-8deg); box-shadow: 43.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(63):hover ~ .card .overlay:before { -webkit-transform: translate(-160px, 60px) rotate(30deg); transform: translate(-160px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(63):hover ~ .card .error { -webkit-transform: translate(-12px, 4px); transform: translate(-12px, 4px);
}
.wrapper .container .top:nth-child(4):hover ~ .card { -webkit-transform: rotateY(-7.26deg) rotateX(8deg); transform: rotateY(-7.26deg) rotateX(8deg); box-shadow: 40.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(4):hover ~ .card .overlay:before { -webkit-transform: translate(-150px, -60px) rotate(30deg); transform: translate(-150px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(4):hover ~ .card .error { -webkit-transform: translate(-11px, -4px); transform: translate(-11px, -4px);
}
.wrapper .container .middle:nth-child(34):hover ~ .card { -webkit-transform: rotateY(-7.26deg); transform: rotateY(-7.26deg); box-shadow: 40.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(34):hover ~ .card .overlay:before { -webkit-transform: translate(-150px) rotate(30deg); transform: translate(-150px) rotate(30deg);
}
.wrapper .container .middle:nth-child(34):hover ~ .card .error { -webkit-transform: translate(-11px); transform: translate(-11px);
}
.wrapper .container .bottom:nth-child(64):hover ~ .card { -webkit-transform: rotateY(-7.26deg) rotateX(-8deg); transform: rotateY(-7.26deg) rotateX(-8deg); box-shadow: 40.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(64):hover ~ .card .overlay:before { -webkit-transform: translate(-150px, 60px) rotate(30deg); transform: translate(-150px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(64):hover ~ .card .error { -webkit-transform: translate(-11px, 4px); transform: translate(-11px, 4px);
}
.wrapper .container .top:nth-child(5):hover ~ .card { -webkit-transform: rotateY(-6.6deg) rotateX(8deg); transform: rotateY(-6.6deg) rotateX(8deg); box-shadow: 37.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(5):hover ~ .card .overlay:before { -webkit-transform: translate(-140px, -60px) rotate(30deg); transform: translate(-140px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(5):hover ~ .card .error { -webkit-transform: translate(-10px, -4px); transform: translate(-10px, -4px);
}
.wrapper .container .middle:nth-child(35):hover ~ .card { -webkit-transform: rotateY(-6.6deg); transform: rotateY(-6.6deg); box-shadow: 37.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(35):hover ~ .card .overlay:before { -webkit-transform: translate(-140px) rotate(30deg); transform: translate(-140px) rotate(30deg);
}
.wrapper .container .middle:nth-child(35):hover ~ .card .error { -webkit-transform: translate(-10px); transform: translate(-10px);
}
.wrapper .container .bottom:nth-child(65):hover ~ .card { -webkit-transform: rotateY(-6.6deg) rotateX(-8deg); transform: rotateY(-6.6deg) rotateX(-8deg); box-shadow: 37.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(65):hover ~ .card .overlay:before { -webkit-transform: translate(-140px, 60px) rotate(30deg); transform: translate(-140px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(65):hover ~ .card .error { -webkit-transform: translate(-10px, 4px); transform: translate(-10px, 4px);
}
.wrapper .container .top:nth-child(6):hover ~ .card { -webkit-transform: rotateY(-5.94deg) rotateX(8deg); transform: rotateY(-5.94deg) rotateX(8deg); box-shadow: 34.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(6):hover ~ .card .overlay:before { -webkit-transform: translate(-130px, -60px) rotate(30deg); transform: translate(-130px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(6):hover ~ .card .error { -webkit-transform: translate(-9px, -4px); transform: translate(-9px, -4px);
}
.wrapper .container .middle:nth-child(36):hover ~ .card { -webkit-transform: rotateY(-5.94deg); transform: rotateY(-5.94deg); box-shadow: 34.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(36):hover ~ .card .overlay:before { -webkit-transform: translate(-130px) rotate(30deg); transform: translate(-130px) rotate(30deg);
}
.wrapper .container .middle:nth-child(36):hover ~ .card .error { -webkit-transform: translate(-9px); transform: translate(-9px);
}
.wrapper .container .bottom:nth-child(66):hover ~ .card { -webkit-transform: rotateY(-5.94deg) rotateX(-8deg); transform: rotateY(-5.94deg) rotateX(-8deg); box-shadow: 34.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(66):hover ~ .card .overlay:before { -webkit-transform: translate(-130px, 60px) rotate(30deg); transform: translate(-130px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(66):hover ~ .card .error { -webkit-transform: translate(-9px, 4px); transform: translate(-9px, 4px);
}
.wrapper .container .top:nth-child(7):hover ~ .card { -webkit-transform: rotateY(-5.28deg) rotateX(8deg); transform: rotateY(-5.28deg) rotateX(8deg); box-shadow: 31.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(7):hover ~ .card .overlay:before { -webkit-transform: translate(-120px, -60px) rotate(30deg); transform: translate(-120px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(7):hover ~ .card .error { -webkit-transform: translate(-8px, -4px); transform: translate(-8px, -4px);
}
.wrapper .container .middle:nth-child(37):hover ~ .card { -webkit-transform: rotateY(-5.28deg); transform: rotateY(-5.28deg); box-shadow: 31.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(37):hover ~ .card .overlay:before { -webkit-transform: translate(-120px) rotate(30deg); transform: translate(-120px) rotate(30deg);
}
.wrapper .container .middle:nth-child(37):hover ~ .card .error { -webkit-transform: translate(-8px); transform: translate(-8px);
}
.wrapper .container .bottom:nth-child(67):hover ~ .card { -webkit-transform: rotateY(-5.28deg) rotateX(-8deg); transform: rotateY(-5.28deg) rotateX(-8deg); box-shadow: 31.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(67):hover ~ .card .overlay:before { -webkit-transform: translate(-120px, 60px) rotate(30deg); transform: translate(-120px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(67):hover ~ .card .error { -webkit-transform: translate(-8px, 4px); transform: translate(-8px, 4px);
}
.wrapper .container .top:nth-child(8):hover ~ .card { -webkit-transform: rotateY(-4.62deg) rotateX(8deg); transform: rotateY(-4.62deg) rotateX(8deg); box-shadow: 28.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(8):hover ~ .card .overlay:before { -webkit-transform: translate(-110px, -60px) rotate(30deg); transform: translate(-110px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(8):hover ~ .card .error { -webkit-transform: translate(-7px, -4px); transform: translate(-7px, -4px);
}
.wrapper .container .middle:nth-child(38):hover ~ .card { -webkit-transform: rotateY(-4.62deg); transform: rotateY(-4.62deg); box-shadow: 28.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(38):hover ~ .card .overlay:before { -webkit-transform: translate(-110px) rotate(30deg); transform: translate(-110px) rotate(30deg);
}
.wrapper .container .middle:nth-child(38):hover ~ .card .error { -webkit-transform: translate(-7px); transform: translate(-7px);
}
.wrapper .container .bottom:nth-child(68):hover ~ .card { -webkit-transform: rotateY(-4.62deg) rotateX(-8deg); transform: rotateY(-4.62deg) rotateX(-8deg); box-shadow: 28.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(68):hover ~ .card .overlay:before { -webkit-transform: translate(-110px, 60px) rotate(30deg); transform: translate(-110px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(68):hover ~ .card .error { -webkit-transform: translate(-7px, 4px); transform: translate(-7px, 4px);
}
.wrapper .container .top:nth-child(9):hover ~ .card { -webkit-transform: rotateY(-3.96deg) rotateX(8deg); transform: rotateY(-3.96deg) rotateX(8deg); box-shadow: 25.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(9):hover ~ .card .overlay:before { -webkit-transform: translate(-100px, -60px) rotate(30deg); transform: translate(-100px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(9):hover ~ .card .error { -webkit-transform: translate(-6px, -4px); transform: translate(-6px, -4px);
}
.wrapper .container .middle:nth-child(39):hover ~ .card { -webkit-transform: rotateY(-3.96deg); transform: rotateY(-3.96deg); box-shadow: 25.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(39):hover ~ .card .overlay:before { -webkit-transform: translate(-100px) rotate(30deg); transform: translate(-100px) rotate(30deg);
}
.wrapper .container .middle:nth-child(39):hover ~ .card .error { -webkit-transform: translate(-6px); transform: translate(-6px);
}
.wrapper .container .bottom:nth-child(69):hover ~ .card { -webkit-transform: rotateY(-3.96deg) rotateX(-8deg); transform: rotateY(-3.96deg) rotateX(-8deg); box-shadow: 25.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(69):hover ~ .card .overlay:before { -webkit-transform: translate(-100px, 60px) rotate(30deg); transform: translate(-100px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(69):hover ~ .card .error { -webkit-transform: translate(-6px, 4px); transform: translate(-6px, 4px);
}
.wrapper .container .top:nth-child(10):hover ~ .card { -webkit-transform: rotateY(-3.3deg) rotateX(8deg); transform: rotateY(-3.3deg) rotateX(8deg); box-shadow: 22.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(10):hover ~ .card .overlay:before { -webkit-transform: translate(-90px, -60px) rotate(30deg); transform: translate(-90px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(10):hover ~ .card .error { -webkit-transform: translate(-5px, -4px); transform: translate(-5px, -4px);
}
.wrapper .container .middle:nth-child(40):hover ~ .card { -webkit-transform: rotateY(-3.3deg); transform: rotateY(-3.3deg); box-shadow: 22.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(40):hover ~ .card .overlay:before { -webkit-transform: translate(-90px) rotate(30deg); transform: translate(-90px) rotate(30deg);
}
.wrapper .container .middle:nth-child(40):hover ~ .card .error { -webkit-transform: translate(-5px); transform: translate(-5px);
}
.wrapper .container .bottom:nth-child(70):hover ~ .card { -webkit-transform: rotateY(-3.3deg) rotateX(-8deg); transform: rotateY(-3.3deg) rotateX(-8deg); box-shadow: 22.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(70):hover ~ .card .overlay:before { -webkit-transform: translate(-90px, 60px) rotate(30deg); transform: translate(-90px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(70):hover ~ .card .error { -webkit-transform: translate(-5px, 4px); transform: translate(-5px, 4px);
}
.wrapper .container .top:nth-child(11):hover ~ .card { -webkit-transform: rotateY(-2.64deg) rotateX(8deg); transform: rotateY(-2.64deg) rotateX(8deg); box-shadow: 19.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(11):hover ~ .card .overlay:before { -webkit-transform: translate(-80px, -60px) rotate(30deg); transform: translate(-80px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(11):hover ~ .card .error { -webkit-transform: translate(-4px, -4px); transform: translate(-4px, -4px);
}
.wrapper .container .middle:nth-child(41):hover ~ .card { -webkit-transform: rotateY(-2.64deg); transform: rotateY(-2.64deg); box-shadow: 19.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(41):hover ~ .card .overlay:before { -webkit-transform: translate(-80px) rotate(30deg); transform: translate(-80px) rotate(30deg);
}
.wrapper .container .middle:nth-child(41):hover ~ .card .error { -webkit-transform: translate(-4px); transform: translate(-4px);
}
.wrapper .container .bottom:nth-child(71):hover ~ .card { -webkit-transform: rotateY(-2.64deg) rotateX(-8deg); transform: rotateY(-2.64deg) rotateX(-8deg); box-shadow: 19.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(71):hover ~ .card .overlay:before { -webkit-transform: translate(-80px, 60px) rotate(30deg); transform: translate(-80px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(71):hover ~ .card .error { -webkit-transform: translate(-4px, 4px); transform: translate(-4px, 4px);
}
.wrapper .container .top:nth-child(12):hover ~ .card { -webkit-transform: rotateY(-1.98deg) rotateX(8deg); transform: rotateY(-1.98deg) rotateX(8deg); box-shadow: 16.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(12):hover ~ .card .overlay:before { -webkit-transform: translate(-70px, -60px) rotate(30deg); transform: translate(-70px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(12):hover ~ .card .error { -webkit-transform: translate(-3px, -4px); transform: translate(-3px, -4px);
}
.wrapper .container .middle:nth-child(42):hover ~ .card { -webkit-transform: rotateY(-1.98deg); transform: rotateY(-1.98deg); box-shadow: 16.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(42):hover ~ .card .overlay:before { -webkit-transform: translate(-70px) rotate(30deg); transform: translate(-70px) rotate(30deg);
}
.wrapper .container .middle:nth-child(42):hover ~ .card .error { -webkit-transform: translate(-3px); transform: translate(-3px);
}
.wrapper .container .bottom:nth-child(72):hover ~ .card { -webkit-transform: rotateY(-1.98deg) rotateX(-8deg); transform: rotateY(-1.98deg) rotateX(-8deg); box-shadow: 16.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(72):hover ~ .card .overlay:before { -webkit-transform: translate(-70px, 60px) rotate(30deg); transform: translate(-70px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(72):hover ~ .card .error { -webkit-transform: translate(-3px, 4px); transform: translate(-3px, 4px);
}
.wrapper .container .top:nth-child(13):hover ~ .card { -webkit-transform: rotateY(-1.32deg) rotateX(8deg); transform: rotateY(-1.32deg) rotateX(8deg); box-shadow: 13.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(13):hover ~ .card .overlay:before { -webkit-transform: translate(-60px, -60px) rotate(30deg); transform: translate(-60px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(13):hover ~ .card .error { -webkit-transform: translate(-2px, -4px); transform: translate(-2px, -4px);
}
.wrapper .container .middle:nth-child(43):hover ~ .card { -webkit-transform: rotateY(-1.32deg); transform: rotateY(-1.32deg); box-shadow: 13.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(43):hover ~ .card .overlay:before { -webkit-transform: translate(-60px) rotate(30deg); transform: translate(-60px) rotate(30deg);
}
.wrapper .container .middle:nth-child(43):hover ~ .card .error { -webkit-transform: translate(-2px); transform: translate(-2px);
}
.wrapper .container .bottom:nth-child(73):hover ~ .card { -webkit-transform: rotateY(-1.32deg) rotateX(-8deg); transform: rotateY(-1.32deg) rotateX(-8deg); box-shadow: 13.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(73):hover ~ .card .overlay:before { -webkit-transform: translate(-60px, 60px) rotate(30deg); transform: translate(-60px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(73):hover ~ .card .error { -webkit-transform: translate(-2px, 4px); transform: translate(-2px, 4px);
}
.wrapper .container .top:nth-child(14):hover ~ .card { -webkit-transform: rotateY(-0.66deg) rotateX(8deg); transform: rotateY(-0.66deg) rotateX(8deg); box-shadow: 10.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(14):hover ~ .card .overlay:before { -webkit-transform: translate(-50px, -60px) rotate(30deg); transform: translate(-50px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(14):hover ~ .card .error { -webkit-transform: translate(-1px, -4px); transform: translate(-1px, -4px);
}
.wrapper .container .middle:nth-child(44):hover ~ .card { -webkit-transform: rotateY(-0.66deg); transform: rotateY(-0.66deg); box-shadow: 10.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(44):hover ~ .card .overlay:before { -webkit-transform: translate(-50px) rotate(30deg); transform: translate(-50px) rotate(30deg);
}
.wrapper .container .middle:nth-child(44):hover ~ .card .error { -webkit-transform: translate(-1px); transform: translate(-1px);
}
.wrapper .container .bottom:nth-child(74):hover ~ .card { -webkit-transform: rotateY(-0.66deg) rotateX(-8deg); transform: rotateY(-0.66deg) rotateX(-8deg); box-shadow: 10.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(74):hover ~ .card .overlay:before { -webkit-transform: translate(-50px, 60px) rotate(30deg); transform: translate(-50px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(74):hover ~ .card .error { -webkit-transform: translate(-1px, 4px); transform: translate(-1px, 4px);
}
.wrapper .container .top:nth-child(15):hover ~ .card { -webkit-transform: rotateY(0deg) rotateX(8deg); transform: rotateY(0deg) rotateX(8deg); box-shadow: 7.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(15):hover ~ .card .overlay:before { -webkit-transform: translate(-40px, -60px) rotate(30deg); transform: translate(-40px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(15):hover ~ .card .error { -webkit-transform: translate(0px, -4px); transform: translate(0px, -4px);
}
.wrapper .container .middle:nth-child(45):hover ~ .card { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); box-shadow: 7.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(45):hover ~ .card .overlay:before { -webkit-transform: translate(-40px) rotate(30deg); transform: translate(-40px) rotate(30deg);
}
.wrapper .container .middle:nth-child(45):hover ~ .card .error { -webkit-transform: translate(0px); transform: translate(0px);
}
.wrapper .container .bottom:nth-child(75):hover ~ .card { -webkit-transform: rotateY(0deg) rotateX(-8deg); transform: rotateY(0deg) rotateX(-8deg); box-shadow: 7.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(75):hover ~ .card .overlay:before { -webkit-transform: translate(-40px, 60px) rotate(30deg); transform: translate(-40px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(75):hover ~ .card .error { -webkit-transform: translate(0px, 4px); transform: translate(0px, 4px);
}
.wrapper .container .top:nth-child(16):hover ~ .card { -webkit-transform: rotateY(0.66deg) rotateX(8deg); transform: rotateY(0.66deg) rotateX(8deg); box-shadow: 4.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(16):hover ~ .card .overlay:before { -webkit-transform: translate(-30px, -60px) rotate(30deg); transform: translate(-30px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(16):hover ~ .card .error { -webkit-transform: translate(1px, -4px); transform: translate(1px, -4px);
}
.wrapper .container .middle:nth-child(46):hover ~ .card { -webkit-transform: rotateY(0.66deg); transform: rotateY(0.66deg); box-shadow: 4.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(46):hover ~ .card .overlay:before { -webkit-transform: translate(-30px) rotate(30deg); transform: translate(-30px) rotate(30deg);
}
.wrapper .container .middle:nth-child(46):hover ~ .card .error { -webkit-transform: translate(1px); transform: translate(1px);
}
.wrapper .container .bottom:nth-child(76):hover ~ .card { -webkit-transform: rotateY(0.66deg) rotateX(-8deg); transform: rotateY(0.66deg) rotateX(-8deg); box-shadow: 4.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(76):hover ~ .card .overlay:before { -webkit-transform: translate(-30px, 60px) rotate(30deg); transform: translate(-30px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(76):hover ~ .card .error { -webkit-transform: translate(1px, 4px); transform: translate(1px, 4px);
}
.wrapper .container .top:nth-child(17):hover ~ .card { -webkit-transform: rotateY(1.32deg) rotateX(8deg); transform: rotateY(1.32deg) rotateX(8deg); box-shadow: 1.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(17):hover ~ .card .overlay:before { -webkit-transform: translate(-20px, -60px) rotate(30deg); transform: translate(-20px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(17):hover ~ .card .error { -webkit-transform: translate(2px, -4px); transform: translate(2px, -4px);
}
.wrapper .container .middle:nth-child(47):hover ~ .card { -webkit-transform: rotateY(1.32deg); transform: rotateY(1.32deg); box-shadow: 1.66px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(47):hover ~ .card .overlay:before { -webkit-transform: translate(-20px) rotate(30deg); transform: translate(-20px) rotate(30deg);
}
.wrapper .container .middle:nth-child(47):hover ~ .card .error { -webkit-transform: translate(2px); transform: translate(2px);
}
.wrapper .container .bottom:nth-child(77):hover ~ .card { -webkit-transform: rotateY(1.32deg) rotateX(-8deg); transform: rotateY(1.32deg) rotateX(-8deg); box-shadow: 1.66px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(77):hover ~ .card .overlay:before { -webkit-transform: translate(-20px, 60px) rotate(30deg); transform: translate(-20px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(77):hover ~ .card .error { -webkit-transform: translate(2px, 4px); transform: translate(2px, 4px);
}
.wrapper .container .top:nth-child(18):hover ~ .card { -webkit-transform: rotateY(1.98deg) rotateX(8deg); transform: rotateY(1.98deg) rotateX(8deg); box-shadow: -1.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(18):hover ~ .card .overlay:before { -webkit-transform: translate(-10px, -60px) rotate(30deg); transform: translate(-10px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(18):hover ~ .card .error { -webkit-transform: translate(3px, -4px); transform: translate(3px, -4px);
}
.wrapper .container .middle:nth-child(48):hover ~ .card { -webkit-transform: rotateY(1.98deg); transform: rotateY(1.98deg); box-shadow: -1.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(48):hover ~ .card .overlay:before { -webkit-transform: translate(-10px) rotate(30deg); transform: translate(-10px) rotate(30deg);
}
.wrapper .container .middle:nth-child(48):hover ~ .card .error { -webkit-transform: translate(3px); transform: translate(3px);
}
.wrapper .container .bottom:nth-child(78):hover ~ .card { -webkit-transform: rotateY(1.98deg) rotateX(-8deg); transform: rotateY(1.98deg) rotateX(-8deg); box-shadow: -1.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(78):hover ~ .card .overlay:before { -webkit-transform: translate(-10px, 60px) rotate(30deg); transform: translate(-10px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(78):hover ~ .card .error { -webkit-transform: translate(3px, 4px); transform: translate(3px, 4px);
}
.wrapper .container .top:nth-child(19):hover ~ .card { -webkit-transform: rotateY(2.64deg) rotateX(8deg); transform: rotateY(2.64deg) rotateX(8deg); box-shadow: -4.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(19):hover ~ .card .overlay:before { -webkit-transform: translate(0px, -60px) rotate(30deg); transform: translate(0px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(19):hover ~ .card .error { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px);
}
.wrapper .container .middle:nth-child(49):hover ~ .card { -webkit-transform: rotateY(2.64deg); transform: rotateY(2.64deg); box-shadow: -4.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(49):hover ~ .card .overlay:before { -webkit-transform: translate(0px) rotate(30deg); transform: translate(0px) rotate(30deg);
}
.wrapper .container .middle:nth-child(49):hover ~ .card .error { -webkit-transform: translate(4px); transform: translate(4px);
}
.wrapper .container .bottom:nth-child(79):hover ~ .card { -webkit-transform: rotateY(2.64deg) rotateX(-8deg); transform: rotateY(2.64deg) rotateX(-8deg); box-shadow: -4.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(79):hover ~ .card .overlay:before { -webkit-transform: translate(0px, 60px) rotate(30deg); transform: translate(0px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(79):hover ~ .card .error { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px);
}
.wrapper .container .top:nth-child(20):hover ~ .card { -webkit-transform: rotateY(3.3deg) rotateX(8deg); transform: rotateY(3.3deg) rotateX(8deg); box-shadow: -7.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(20):hover ~ .card .overlay:before { -webkit-transform: translate(10px, -60px) rotate(30deg); transform: translate(10px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(20):hover ~ .card .error { -webkit-transform: translate(5px, -4px); transform: translate(5px, -4px);
}
.wrapper .container .middle:nth-child(50):hover ~ .card { -webkit-transform: rotateY(3.3deg); transform: rotateY(3.3deg); box-shadow: -7.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(50):hover ~ .card .overlay:before { -webkit-transform: translate(10px) rotate(30deg); transform: translate(10px) rotate(30deg);
}
.wrapper .container .middle:nth-child(50):hover ~ .card .error { -webkit-transform: translate(5px); transform: translate(5px);
}
.wrapper .container .bottom:nth-child(80):hover ~ .card { -webkit-transform: rotateY(3.3deg) rotateX(-8deg); transform: rotateY(3.3deg) rotateX(-8deg); box-shadow: -7.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(80):hover ~ .card .overlay:before { -webkit-transform: translate(10px, 60px) rotate(30deg); transform: translate(10px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(80):hover ~ .card .error { -webkit-transform: translate(5px, 4px); transform: translate(5px, 4px);
}
.wrapper .container .top:nth-child(21):hover ~ .card { -webkit-transform: rotateY(3.96deg) rotateX(8deg); transform: rotateY(3.96deg) rotateX(8deg); box-shadow: -10.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(21):hover ~ .card .overlay:before { -webkit-transform: translate(20px, -60px) rotate(30deg); transform: translate(20px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(21):hover ~ .card .error { -webkit-transform: translate(6px, -4px); transform: translate(6px, -4px);
}
.wrapper .container .middle:nth-child(51):hover ~ .card { -webkit-transform: rotateY(3.96deg); transform: rotateY(3.96deg); box-shadow: -10.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(51):hover ~ .card .overlay:before { -webkit-transform: translate(20px) rotate(30deg); transform: translate(20px) rotate(30deg);
}
.wrapper .container .middle:nth-child(51):hover ~ .card .error { -webkit-transform: translate(6px); transform: translate(6px);
}
.wrapper .container .bottom:nth-child(81):hover ~ .card { -webkit-transform: rotateY(3.96deg) rotateX(-8deg); transform: rotateY(3.96deg) rotateX(-8deg); box-shadow: -10.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(81):hover ~ .card .overlay:before { -webkit-transform: translate(20px, 60px) rotate(30deg); transform: translate(20px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(81):hover ~ .card .error { -webkit-transform: translate(6px, 4px); transform: translate(6px, 4px);
}
.wrapper .container .top:nth-child(22):hover ~ .card { -webkit-transform: rotateY(4.62deg) rotateX(8deg); transform: rotateY(4.62deg) rotateX(8deg); box-shadow: -13.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(22):hover ~ .card .overlay:before { -webkit-transform: translate(30px, -60px) rotate(30deg); transform: translate(30px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(22):hover ~ .card .error { -webkit-transform: translate(7px, -4px); transform: translate(7px, -4px);
}
.wrapper .container .middle:nth-child(52):hover ~ .card { -webkit-transform: rotateY(4.62deg); transform: rotateY(4.62deg); box-shadow: -13.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(52):hover ~ .card .overlay:before { -webkit-transform: translate(30px) rotate(30deg); transform: translate(30px) rotate(30deg);
}
.wrapper .container .middle:nth-child(52):hover ~ .card .error { -webkit-transform: translate(7px); transform: translate(7px);
}
.wrapper .container .bottom:nth-child(82):hover ~ .card { -webkit-transform: rotateY(4.62deg) rotateX(-8deg); transform: rotateY(4.62deg) rotateX(-8deg); box-shadow: -13.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(82):hover ~ .card .overlay:before { -webkit-transform: translate(30px, 60px) rotate(30deg); transform: translate(30px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(82):hover ~ .card .error { -webkit-transform: translate(7px, 4px); transform: translate(7px, 4px);
}
.wrapper .container .top:nth-child(23):hover ~ .card { -webkit-transform: rotateY(5.28deg) rotateX(8deg); transform: rotateY(5.28deg) rotateX(8deg); box-shadow: -16.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(23):hover ~ .card .overlay:before { -webkit-transform: translate(40px, -60px) rotate(30deg); transform: translate(40px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(23):hover ~ .card .error { -webkit-transform: translate(8px, -4px); transform: translate(8px, -4px);
}
.wrapper .container .middle:nth-child(53):hover ~ .card { -webkit-transform: rotateY(5.28deg); transform: rotateY(5.28deg); box-shadow: -16.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(53):hover ~ .card .overlay:before { -webkit-transform: translate(40px) rotate(30deg); transform: translate(40px) rotate(30deg);
}
.wrapper .container .middle:nth-child(53):hover ~ .card .error { -webkit-transform: translate(8px); transform: translate(8px);
}
.wrapper .container .bottom:nth-child(83):hover ~ .card { -webkit-transform: rotateY(5.28deg) rotateX(-8deg); transform: rotateY(5.28deg) rotateX(-8deg); box-shadow: -16.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(83):hover ~ .card .overlay:before { -webkit-transform: translate(40px, 60px) rotate(30deg); transform: translate(40px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(83):hover ~ .card .error { -webkit-transform: translate(8px, 4px); transform: translate(8px, 4px);
}
.wrapper .container .top:nth-child(24):hover ~ .card { -webkit-transform: rotateY(5.94deg) rotateX(8deg); transform: rotateY(5.94deg) rotateX(8deg); box-shadow: -19.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(24):hover ~ .card .overlay:before { -webkit-transform: translate(50px, -60px) rotate(30deg); transform: translate(50px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(24):hover ~ .card .error { -webkit-transform: translate(9px, -4px); transform: translate(9px, -4px);
}
.wrapper .container .middle:nth-child(54):hover ~ .card { -webkit-transform: rotateY(5.94deg); transform: rotateY(5.94deg); box-shadow: -19.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(54):hover ~ .card .overlay:before { -webkit-transform: translate(50px) rotate(30deg); transform: translate(50px) rotate(30deg);
}
.wrapper .container .middle:nth-child(54):hover ~ .card .error { -webkit-transform: translate(9px); transform: translate(9px);
}
.wrapper .container .bottom:nth-child(84):hover ~ .card { -webkit-transform: rotateY(5.94deg) rotateX(-8deg); transform: rotateY(5.94deg) rotateX(-8deg); box-shadow: -19.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(84):hover ~ .card .overlay:before { -webkit-transform: translate(50px, 60px) rotate(30deg); transform: translate(50px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(84):hover ~ .card .error { -webkit-transform: translate(9px, 4px); transform: translate(9px, 4px);
}
.wrapper .container .top:nth-child(25):hover ~ .card { -webkit-transform: rotateY(6.6deg) rotateX(8deg); transform: rotateY(6.6deg) rotateX(8deg); box-shadow: -22.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(25):hover ~ .card .overlay:before { -webkit-transform: translate(60px, -60px) rotate(30deg); transform: translate(60px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(25):hover ~ .card .error { -webkit-transform: translate(10px, -4px); transform: translate(10px, -4px);
}
.wrapper .container .middle:nth-child(55):hover ~ .card { -webkit-transform: rotateY(6.6deg); transform: rotateY(6.6deg); box-shadow: -22.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(55):hover ~ .card .overlay:before { -webkit-transform: translate(60px) rotate(30deg); transform: translate(60px) rotate(30deg);
}
.wrapper .container .middle:nth-child(55):hover ~ .card .error { -webkit-transform: translate(10px); transform: translate(10px);
}
.wrapper .container .bottom:nth-child(85):hover ~ .card { -webkit-transform: rotateY(6.6deg) rotateX(-8deg); transform: rotateY(6.6deg) rotateX(-8deg); box-shadow: -22.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(85):hover ~ .card .overlay:before { -webkit-transform: translate(60px, 60px) rotate(30deg); transform: translate(60px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(85):hover ~ .card .error { -webkit-transform: translate(10px, 4px); transform: translate(10px, 4px);
}
.wrapper .container .top:nth-child(26):hover ~ .card { -webkit-transform: rotateY(7.26deg) rotateX(8deg); transform: rotateY(7.26deg) rotateX(8deg); box-shadow: -25.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(26):hover ~ .card .overlay:before { -webkit-transform: translate(70px, -60px) rotate(30deg); transform: translate(70px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(26):hover ~ .card .error { -webkit-transform: translate(11px, -4px); transform: translate(11px, -4px);
}
.wrapper .container .middle:nth-child(56):hover ~ .card { -webkit-transform: rotateY(7.26deg); transform: rotateY(7.26deg); box-shadow: -25.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(56):hover ~ .card .overlay:before { -webkit-transform: translate(70px) rotate(30deg); transform: translate(70px) rotate(30deg);
}
.wrapper .container .middle:nth-child(56):hover ~ .card .error { -webkit-transform: translate(11px); transform: translate(11px);
}
.wrapper .container .bottom:nth-child(86):hover ~ .card { -webkit-transform: rotateY(7.26deg) rotateX(-8deg); transform: rotateY(7.26deg) rotateX(-8deg); box-shadow: -25.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(86):hover ~ .card .overlay:before { -webkit-transform: translate(70px, 60px) rotate(30deg); transform: translate(70px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(86):hover ~ .card .error { -webkit-transform: translate(11px, 4px); transform: translate(11px, 4px);
}
.wrapper .container .top:nth-child(27):hover ~ .card { -webkit-transform: rotateY(7.92deg) rotateX(8deg); transform: rotateY(7.92deg) rotateX(8deg); box-shadow: -28.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(27):hover ~ .card .overlay:before { -webkit-transform: translate(80px, -60px) rotate(30deg); transform: translate(80px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(27):hover ~ .card .error { -webkit-transform: translate(12px, -4px); transform: translate(12px, -4px);
}
.wrapper .container .middle:nth-child(57):hover ~ .card { -webkit-transform: rotateY(7.92deg); transform: rotateY(7.92deg); box-shadow: -28.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(57):hover ~ .card .overlay:before { -webkit-transform: translate(80px) rotate(30deg); transform: translate(80px) rotate(30deg);
}
.wrapper .container .middle:nth-child(57):hover ~ .card .error { -webkit-transform: translate(12px); transform: translate(12px);
}
.wrapper .container .bottom:nth-child(87):hover ~ .card { -webkit-transform: rotateY(7.92deg) rotateX(-8deg); transform: rotateY(7.92deg) rotateX(-8deg); box-shadow: -28.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(87):hover ~ .card .overlay:before { -webkit-transform: translate(80px, 60px) rotate(30deg); transform: translate(80px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(87):hover ~ .card .error { -webkit-transform: translate(12px, 4px); transform: translate(12px, 4px);
}
.wrapper .container .top:nth-child(28):hover ~ .card { -webkit-transform: rotateY(8.58deg) rotateX(8deg); transform: rotateY(8.58deg) rotateX(8deg); box-shadow: -31.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(28):hover ~ .card .overlay:before { -webkit-transform: translate(90px, -60px) rotate(30deg); transform: translate(90px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(28):hover ~ .card .error { -webkit-transform: translate(13px, -4px); transform: translate(13px, -4px);
}
.wrapper .container .middle:nth-child(58):hover ~ .card { -webkit-transform: rotateY(8.58deg); transform: rotateY(8.58deg); box-shadow: -31.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(58):hover ~ .card .overlay:before { -webkit-transform: translate(90px) rotate(30deg); transform: translate(90px) rotate(30deg);
}
.wrapper .container .middle:nth-child(58):hover ~ .card .error { -webkit-transform: translate(13px); transform: translate(13px);
}
.wrapper .container .bottom:nth-child(88):hover ~ .card { -webkit-transform: rotateY(8.58deg) rotateX(-8deg); transform: rotateY(8.58deg) rotateX(-8deg); box-shadow: -31.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(88):hover ~ .card .overlay:before { -webkit-transform: translate(90px, 60px) rotate(30deg); transform: translate(90px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(88):hover ~ .card .error { -webkit-transform: translate(13px, 4px); transform: translate(13px, 4px);
}
.wrapper .container .top:nth-child(29):hover ~ .card { -webkit-transform: rotateY(9.24deg) rotateX(8deg); transform: rotateY(9.24deg) rotateX(8deg); box-shadow: -34.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(29):hover ~ .card .overlay:before { -webkit-transform: translate(100px, -60px) rotate(30deg); transform: translate(100px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(29):hover ~ .card .error { -webkit-transform: translate(14px, -4px); transform: translate(14px, -4px);
}
.wrapper .container .middle:nth-child(59):hover ~ .card { -webkit-transform: rotateY(9.24deg); transform: rotateY(9.24deg); box-shadow: -34.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(59):hover ~ .card .overlay:before { -webkit-transform: translate(100px) rotate(30deg); transform: translate(100px) rotate(30deg);
}
.wrapper .container .middle:nth-child(59):hover ~ .card .error { -webkit-transform: translate(14px); transform: translate(14px);
}
.wrapper .container .bottom:nth-child(89):hover ~ .card { -webkit-transform: rotateY(9.24deg) rotateX(-8deg); transform: rotateY(9.24deg) rotateX(-8deg); box-shadow: -34.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(89):hover ~ .card .overlay:before { -webkit-transform: translate(100px, 60px) rotate(30deg); transform: translate(100px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(89):hover ~ .card .error { -webkit-transform: translate(14px, 4px); transform: translate(14px, 4px);
}
.wrapper .container .top:nth-child(30):hover ~ .card { -webkit-transform: rotateY(9.9deg) rotateX(8deg); transform: rotateY(9.9deg) rotateX(8deg); box-shadow: -37.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .top:nth-child(30):hover ~ .card .overlay:before { -webkit-transform: translate(110px, -60px) rotate(30deg); transform: translate(110px, -60px) rotate(30deg);
}
.wrapper .container .top:nth-child(30):hover ~ .card .error { -webkit-transform: translate(15px, -4px); transform: translate(15px, -4px);
}
.wrapper .container .middle:nth-child(60):hover ~ .card { -webkit-transform: rotateY(9.9deg); transform: rotateY(9.9deg); box-shadow: -37.34px 30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .middle:nth-child(60):hover ~ .card .overlay:before { -webkit-transform: translate(110px) rotate(30deg); transform: translate(110px) rotate(30deg);
}
.wrapper .container .middle:nth-child(60):hover ~ .card .error { -webkit-transform: translate(15px); transform: translate(15px);
}
.wrapper .container .bottom:nth-child(90):hover ~ .card { -webkit-transform: rotateY(9.9deg) rotateX(-8deg); transform: rotateY(9.9deg) rotateX(-8deg); box-shadow: -37.34px -30px 80px 0px rgba(0, 0, 0, 0.45);
}
.wrapper .container .bottom:nth-child(90):hover ~ .card .overlay:before { -webkit-transform: translate(110px, 60px) rotate(30deg); transform: translate(110px, 60px) rotate(30deg);
}
.wrapper .container .bottom:nth-child(90):hover ~ .card .error { -webkit-transform: translate(15px, 4px); transform: translate(15px, 4px);
}
.wrapper .container .top, .wrapper .container .middle, .wrapper .container .bottom { z-index: 99; float: left; width: 20px; height: 106.66667px; display: block;
}
.wrapper .container .card { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all .15s linear; transition: all .15s linear; height: 100%; width: 100%; min-height: 320px; background-image: -webkit-linear-gradient(top left, #d6d6e1, #e3e6ed, #e3e6ed); background-image: linear-gradient(to bottom right, #d6d6e1, #e3e6ed, #e3e6ed); box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.45); z-index: 1; border-radius: 3px;
}
.wrapper .container .card .overlay { height: 100%; width: 100%; position: absolute; top: 0; left: 0; bottom: 0; padding: 40px; padding-bottom: 0; overflow: hidden; pointer-events: none;
}
.wrapper .container .card .overlay:before { content: ""; position: absolute; top: -120px; left: 0; right: 0; margin: auto; height: 600px; width: 40px; background-color: rgba(255, 255, 255, 0.3); z-index: 99; -webkit-transform: rotate(30deg); transform: rotate(30deg); box-shadow: 0 0 79px 53px rgba(255, 255, 255, 0.3); -webkit-transition: all .2s linear; transition: all .2s linear;
}
.wrapper .container .card .overlay .error { background: rgba(120, 144, 252, 0.2); width: 370px; height: 370px; border-radius: 50%; position: relative; margin: -10px -120px 0px auto; box-shadow: 0 0 0 0 white, 0 0 64px 12px rgba(120, 144, 252, 0.5), inset 0 0 46px 1px rgba(120, 144, 252, 0.3); -webkit-transition: all .2s linear; transition: all .2s linear; pointer-events: none;
}
.wrapper .container .card .overlay .error:before, .wrapper .container .card .overlay .error:after { content: ''; position: absolute; width: 27px; height: 150px; left: 175px; top: 110px; box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1); background: white; opacity: .5;
}
.wrapper .container .card .overlay .error:before { -webkit-transform: skew(28deg); transform: skew(28deg);
}
.wrapper .container .card .overlay .error:after { -webkit-transform: skew(-28deg); transform: skew(-28deg);
}
.wrapper .container .card .overlay h3 { position: absolute; font-size: 68px; color: #898291; font-weight: 300; letter-spacing: -6px;
}
.wrapper .container .card .overlay .btn { position: absolute; text-transform: uppercase; font-weight: bold; font-size: 12px; padding: 10px; padding-left: 40px; padding-right: 40px; border-radius: 40px; background-color: #7890fc; display: inline-block; color: #fff; cursor: pointer; margin-top: 180px; left: 40px;
}
.wrapper .container .card .overlay p { position: absolute; font-size: 12px; font-weight: 500; max-width: 250px; margin-top: 100px; margin-bottom: 50px;
}

Perspective CSS hover effect - Script Codes JS Codes

//None this time
Perspective CSS hover effect - Script Codes
Perspective CSS hover effect - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3.5
Size 7,424 Kb
Views 6,072
Do you need developer help for Perspective CSS hover effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
Material design card
Crosshair loader
Login form
Social sharing button
Content aware dropdown
RoadFURY
Menu concept
3D CSS Gameboy
Nav ui
CSS Pixel game
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!