3D gallery
How do I make an 3d gallery?
Only css. What is a 3d gallery? How do you make a 3d gallery? This script and codes were developed by AxeLVaisper on 20 November 2022, Sunday.
3D gallery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D gallery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at https://www.cssplay.co.uk/menu/cssplay-animated-cube-gallery.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.gallery {width:490px; height:140px; padding-top:350px; position:relative; margin:50px auto;}
.gallery form {padding:0; margin:0;}
.gallery input {position:absolute; left:-9999px;}
.gallery label {display:block; width:88px; height:66px; float:left; margin:5px; opacity:0.7;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
.gallery label:hover {opacity:1;}
.gallery input + img {position:absolute; left:50%; top:0; z-index:50; margin-left:-200px;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-origin:50% 50% -200px;
-o-transform-origin:50% 50% -200px;
transform-origin:50% 50% -200px;
}
.gallery label img {width:88px; margin:0;}
.gallery input:checked + img
{
opacity:1;
-webkit-animation:spin1 1s forwards linear; z-index:100;
-o-animation:spin1 1s forwards linear; z-index:100;
animation:spin1 1s forwards linear; z-index:100;
}
.gallery input:not(:checked) + img
{
-webkit-animation:spin2 1s forwards linear;
-o-animation:spin2 1s forwards linear;
animation:spin2 1s forwards linear;
}
@-webkit-keyframes spin1 {
0% {-webkit-transform: perspective(1200px) rotateY(-90deg);}
100% {-webkit-transform: perspective(1200px) rotateY(0deg);}
}
@-webkit-keyframes spin2 {
0% {-webkit-transform: perspective(1200px) rotateY(0deg);}
100% {-webkit-transform: perspective(1200px) rotateY(90deg);}
}
@-o-keyframes spin1 {
0% {-o-transform: perspective(1200px) rotateY(-90deg);}
100% {-o-transform: perspective(1200px) rotateY(0deg);}
}
@-o-keyframes spin2 {
0% {-o-transform: perspective(1200px) rotateY(0deg);}
100% {-o-transform: perspective(1200px) rotateY(90deg);}
}
@keyframes spin1 {
0% {transform: perspective(1200px) rotateY(-90deg);}
100% {transform: perspective(1200px) rotateY(0deg);}
}
@keyframes spin2 {
0% {transform: perspective(1200px) rotateY(0deg);}
100% {transform: perspective(1200px) rotateY(90deg);}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <head> <!--[if lte IE 9]>
<style type="text/css">
/* to show a single image in IE9 and lower */
.gallery {width:400px; height:300px; position:relative; margin:50px auto;}
.gallery input,
.gallery label {display:none;}
.gallery img {position:absolute; left:0; top:0;}
</style>
<![endif]-->
</head> <body> <div class="gallery"> <form action=""> <input type="radio" name="book" id="p1" checked="checked" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p2" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p3" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p4" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p5" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p6" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p7" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p8" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p9" /><img src="http://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p10" /><img src="http://placehold.it/400x300" alt="" /> <label for="p1"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p2"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p3"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p4"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p5"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p6"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p7"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p8"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p9"><img src="http://placehold.it/100x100" alt="" /></label> <label for="p10"><img src="http://placehold.it/100x100" alt="" /></label> </form>
</div> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
3D gallery - Script Codes CSS Codes
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at https://www.cssplay.co.uk/menu/cssplay-animated-cube-gallery.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.gallery {width:490px; height:140px; padding-top:350px; position:relative; margin:50px auto;}
.gallery form {padding:0; margin:0;}
.gallery input {position:absolute; left:-9999px;}
.gallery label {display:block; width:88px; height:66px; float:left; margin:5px; opacity:0.7;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
.gallery label:hover {opacity:1;}
.gallery input + img {position:absolute; left:50%; top:0; z-index:50; margin-left:-200px;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-origin:50% 50% -200px;
-o-transform-origin:50% 50% -200px;
transform-origin:50% 50% -200px;
}
.gallery label img {width:88px; margin:0;}
.gallery input:checked + img
{
opacity:1;
-webkit-animation:spin1 1s forwards linear; z-index:100;
-o-animation:spin1 1s forwards linear; z-index:100;
animation:spin1 1s forwards linear; z-index:100;
}
.gallery input:not(:checked) + img
{
-webkit-animation:spin2 1s forwards linear;
-o-animation:spin2 1s forwards linear;
animation:spin2 1s forwards linear;
}
@-webkit-keyframes spin1 {
0% {-webkit-transform: perspective(1200px) rotateY(-90deg);}
100% {-webkit-transform: perspective(1200px) rotateY(0deg);}
}
@-webkit-keyframes spin2 {
0% {-webkit-transform: perspective(1200px) rotateY(0deg);}
100% {-webkit-transform: perspective(1200px) rotateY(90deg);}
}
@-o-keyframes spin1 {
0% {-o-transform: perspective(1200px) rotateY(-90deg);}
100% {-o-transform: perspective(1200px) rotateY(0deg);}
}
@-o-keyframes spin2 {
0% {-o-transform: perspective(1200px) rotateY(0deg);}
100% {-o-transform: perspective(1200px) rotateY(90deg);}
}
@keyframes spin1 {
0% {transform: perspective(1200px) rotateY(-90deg);}
100% {transform: perspective(1200px) rotateY(0deg);}
}
@keyframes spin2 {
0% {transform: perspective(1200px) rotateY(0deg);}
100% {transform: perspective(1200px) rotateY(90deg);}
}
![3D gallery - Script Codes](http://shots.codepen.io/AxeLVaisper/pen/GEKDn-512.jpg)
Developer | AxeLVaisper |
Username | AxeLVaisper |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 3,170 Kb |
Views | 18,216 |
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 |
Funny Spider XD | 4,045 Kb |
Ribbons | 6,941 Kb |
Sliding Panel Menu using jQuery | 4,309 Kb |
Icofont hover effects | 5,719 Kb |
Bootstrap captcha | 2,435 Kb |
Navbar with 3D effect | 3,620 Kb |
JQuery folder tabs | 4,342 Kb |
Mini Admin panel | 6,642 Kb |
Metro KIT UI | 13,936 Kb |
Login Form | 4,303 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 |
Pagepilling.js | Blossk | 6,554 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Video mute | Leon9208 | 2,131 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Lunar eclipse | Ademilter | 2,056 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!