3D Cube Carousel
How do I make an 3d cube carousel?
4-sided carousel/slider in three, count 'em THREE, dimensions.. What is a 3d cube carousel? How do you make a 3d cube carousel? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.
3D Cube Carousel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Cube Carousel</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! */ @import url(http://fonts.googleapis.com/css?family=Lato:300|Oswald);
.container { width: 90%; max-width: 60em; margin: 0 auto; padding-bottom: 5em; perspective: 100em;
}
.carousel { position: relative; width: 15em; height: 15em; margin: 0 auto; transform-style: preserve-3d; transition: transform 0.5s ease;
}
.carousel[data-slide="1"] { transform: rotateY(0deg);
}
.carousel[data-slide="2"] { transform: rotateY(-90deg);
}
.carousel[data-slide="3"] { transform: rotateY(-180deg);
}
.carousel[data-slide="4"] { transform: rotateY(-270deg);
}
.carousel__slide { position: absolute; width: 15em; height: 15em; background: white;
}
.carousel__slide img { width: 100%;
}
.back, .carousel__slide:nth-child(3) { transform: translateZ(-7.5em) rotateY(180deg);
}
.right, .carousel__slide:nth-child(2) { transform: rotateY(-270deg) translateX(7.5em); transform-origin: top right;
}
.left, .carousel__slide:nth-child(4) { transform: rotateY(270deg) translateX(-7.5em); transform-origin: center left;
}
.front, .carousel__slide:nth-child(1) { transform: translateZ(7.5em);
}
.next, .prev { position: absolute; top: 50%; right: 0; width: 7em; margin-top: -2.5em; border-radius: 3px; background: #44cc00; text-align: center; line-height: 3; color: white; transform: translateY(-50%); cursor: pointer;
}
.prev { left: 0;
}
/** PAGE STYLES **/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { background: #99ff66; font-family: 'Lato', sans-serif; font-size: 2em; line-height: 1.5;
}
.container { width: 90%; max-width: 1200px; margin: 0 auto;
}
h1 { margin: 0; padding: 0.5em; font-family: 'Oswald', sans-serif; font-size: 4em; text-transform: uppercase; text-align: center; color: #339900;
}
/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */
.cf:before, .carousel__slide:before,
.cf:after,
.carousel__slide:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after, .carousel__slide:after { clear: both;
}
/** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.cf, .carousel__slide { *zoom: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Carousel<sup>3</sup></h1>
<div class="container"> <div class="carousel" data-slide="1"> <div class="carousel__slide"> <img src="http://fillmurray.com/g/400/400" /> </div> <div class="carousel__slide"> <img src="http://fillmurray.com/g/500/500" /> </div> <div class="carousel__slide"> <img src="http://fillmurray.com/g/300/300" /> </div> <div class="carousel__slide"> <img src="http://fillmurray.com/g/450/450" /> </div> </div> <div class="next">next</div> <div class="prev">previous</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
3D Cube Carousel - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Lato:300|Oswald);
.container { width: 90%; max-width: 60em; margin: 0 auto; padding-bottom: 5em; perspective: 100em;
}
.carousel { position: relative; width: 15em; height: 15em; margin: 0 auto; transform-style: preserve-3d; transition: transform 0.5s ease;
}
.carousel[data-slide="1"] { transform: rotateY(0deg);
}
.carousel[data-slide="2"] { transform: rotateY(-90deg);
}
.carousel[data-slide="3"] { transform: rotateY(-180deg);
}
.carousel[data-slide="4"] { transform: rotateY(-270deg);
}
.carousel__slide { position: absolute; width: 15em; height: 15em; background: white;
}
.carousel__slide img { width: 100%;
}
.back, .carousel__slide:nth-child(3) { transform: translateZ(-7.5em) rotateY(180deg);
}
.right, .carousel__slide:nth-child(2) { transform: rotateY(-270deg) translateX(7.5em); transform-origin: top right;
}
.left, .carousel__slide:nth-child(4) { transform: rotateY(270deg) translateX(-7.5em); transform-origin: center left;
}
.front, .carousel__slide:nth-child(1) { transform: translateZ(7.5em);
}
.next, .prev { position: absolute; top: 50%; right: 0; width: 7em; margin-top: -2.5em; border-radius: 3px; background: #44cc00; text-align: center; line-height: 3; color: white; transform: translateY(-50%); cursor: pointer;
}
.prev { left: 0;
}
/** PAGE STYLES **/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { background: #99ff66; font-family: 'Lato', sans-serif; font-size: 2em; line-height: 1.5;
}
.container { width: 90%; max-width: 1200px; margin: 0 auto;
}
h1 { margin: 0; padding: 0.5em; font-family: 'Oswald', sans-serif; font-size: 4em; text-transform: uppercase; text-align: center; color: #339900;
}
/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */
.cf:before, .carousel__slide:before,
.cf:after,
.carousel__slide:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after, .carousel__slide:after { clear: both;
}
/** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.cf, .carousel__slide { *zoom: 1;
}
3D Cube Carousel - Script Codes JS Codes
var $carousel = $('.carousel'), currentSlide, nextSlide;
$('.next').click(function() { currentSlide = $carousel.attr('data-slide'); nextSlide = +currentSlide === 4 ? 1 : +currentSlide + 1; $carousel.attr('data-slide', nextSlide);
});
$('.prev').click(function() { currentSlide = $carousel.attr('data-slide'); nextSlide = +currentSlide === 1 ? 4 : +currentSlide - 1; $carousel.attr('data-slide', nextSlide);
});
Developer | Derek Wheelden |
Username | frxnz |
Uploaded | August 10, 2022 |
Rating | 4.5 |
Size | 5,176 Kb |
Views | 58,696 |
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 |
Google Maps Geolocation Test | 4,439 Kb |
JavaScript Templates | 4,381 Kb |
Bouncing Border | 2,548 Kb |
Circular Reveal | 2,913 Kb |
User Listing | 5,274 Kb |
Folding Panels | 3,134 Kb |
Suck It | 2,965 Kb |
Triangle Peeker | 4,339 Kb |
Blockquote Patterns | 3,021 Kb |
Fluid Image Management | 4,196 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 |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Minimelephant | Smashlee | 2,507 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Loading Bar | Jaradlight | 2,333 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!