Faux 3D grid
How do I make an faux 3d grid?
Skew, rotate, rinse, repeat.. What is a faux 3d grid? How do you make a faux 3d grid? This script and codes were developed by Andrew Canham on 23 August 2022, Tuesday.
Faux 3D grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Faux 3D grid</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pair"> <div class="skew"> <div class="skew-inner"> </div> </div> <div class="skew rotate"> <div class="skew-inner"> </div> </div>
</div>
<div class="pair pair2"> <div class="skew"> <div class="skew-inner"> </div> </div> <div class="skew rotate"> <div class="skew-inner"> </div> </div>
</div>
<div class="pair pair3 alternate"> <div class="skew"> <div class="skew-inner"> </div> </div> <div class="skew rotate"> <div class="skew-inner"> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Faux 3D grid - Script Codes CSS Codes
div.pair { width: 600px;
}
div.pair div.skew { height: 200px; position: absolute; width: 320px;
}
div.pair div.skew div.skew-inner { background: #efefef; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5); height: 100%; -webkit-transform: skew(-22.5deg); transform: skew(-22.5deg); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear; width: 100%;
}
div.pair div.skew.rotate { -webkit-transform: translate3d(346px, 143px, 0) rotate(45deg); transform: translate3d(346px, 143px, 0) rotate(45deg);
}
div.pair div.skew.rotate div.skew-inner { -webkit-transform: skew(22.5deg); transform: skew(22.5deg); -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair:hover div.skew div.skew-inner { box-shadow: inset 320px 0 0 rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair:hover div.skew.rotate div.skew-inner { -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear;
}
div.pair.alternate div.skew div.skew-inner { -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair.alternate div.skew.rotate { -webkit-transform: translate3d(-205px, -85px, 0) rotate(45deg); transform: translate3d(-205px, -85px, 0) rotate(45deg);
}
div.pair.alternate div.skew.rotate div.skew-inner { -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear;
}
div.pair.alternate:hover div.skew div.skew-inner { -webkit-transition: all 0.3s 0.3s linear; transition: all 0.3s 0.3s linear;
}
div.pair.alternate:hover div.skew.rotate div.skew-inner { -webkit-transition: all 0.3s 0s linear; transition: all 0.3s 0s linear;
}
div.pair2 { -webkit-transform: translate3d(550px, 228px, 0); transform: translate3d(550px, 228px, 0);
}
div.pair3 { -webkit-transform: translate3d(467px, 430px, 0); transform: translate3d(467px, 430px, 0);
}
Developer | Andrew Canham |
Username | candroo |
Uploaded | August 23, 2022 |
Rating | 3 |
Size | 2,284 Kb |
Views | 26,312 |
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!
Name | Size |
Angled nav reveal | 4,687 Kb |
Footer animation | 4,240 Kb |
Wrinkle links | 4,205 Kb |
Hover flower | 2,952 Kb |
Color hover buttons | 2,840 Kb |
Cloxperiment | 3,514 Kb |
Hover effect | 2,719 Kb |
Spread cards | 4,442 Kb |
3D List expansion | 4,719 Kb |
Motivational message | 4,007 Kb |
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!
Name | Username | Size |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!