3D gallery

Developer

Size

3,170 Kb

Views

18,216

3D gallery Previews
3D gallery HTML Codes
3D gallery CSS Codes

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 Previews

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

Home Page	Home
Developer	AxeLVaisper
Username	AxeLVaisper
Uploaded	November 20, 2022
Rating	3
Size	3,170 Kb
Views	18,216

Do you need developer help for 3D gallery?

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!

AxeLVaisper (AxeLVaisper) Script Codes

Name	Size
Metro KIT UI	13,936 Kb
Tabs	13,949 Kb
Apple navbar	2,873 Kb
Navbar with 3D effect	3,620 Kb
3D accordion	13,545 Kb
Mini Admin panel	6,642 Kb
Tabs with Round Out Borders	3,248 Kb
Sliding Panel Menu using jQuery	4,309 Kb
JQuery folder tabs	4,342 Kb
Login Form	4,303 Kb

Create amazing blog posts 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!

Similar Scripts & Codes

Name	Username	Size
Blank Starter	Mhartington	2,171 Kb
Starfield old school style	Bolloxim	5,214 Kb
A Pen by Anoop	Anoopjohn	330,760 Kb
Super Discount	Orrinward	3,225 Kb
Ball Physics	Getsetbro	3,149 Kb
Count checked checkboxes with jQuery	Mestika	2,343 Kb
Em Test	Rodesco	1,784 Kb
Swiftype Lower Third	Zumwalt	4,796 Kb
Mario	Takaneichinose	3,902 Kb
Light Switch	Bartuc	4,933 Kb

Do you want hide your ip address?

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!