Step into the extraordinary realm of Coding Torque, where innovation takes center stage! Prepare to be enthralled as we embark on an exhilarating journey, pushing the boundaries of web design and development to craft a spellbinding 3D Transform Colorful Animated Carousel using the combined prowess of HTML, CSS, and JS. Picture a mesmerizing carousel that transcends the ordinary, a symphony of vibrant colors and captivating animations that dance in harmony, leaving your users in awe. Whether you’re a coding virtuoso eager to add an enchanting touch to your projects or a creative soul craving to explore the boundless possibilities of web design, this tutorial is your ticket to unleash your imagination and ignite a visual spectacle like never before. So, tighten your seatbelts and get ready to be immersed in the art of digital wizardry, where the ordinary becomes extraordinary, and the carousel takes center stage as a true masterpiece of web enchantment!
Before we start here are 50 projects to create using HTML CSS and JavaScript –
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>3D Transform Colorful Animated Carousel using HTML CSS and JS - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag.
<figure class="icon-cards mt-3">
<div class="icon-cards__content">
<div class="icon-cards__item d-flex align-items-center justify-content-center"><span class="h1">🙂</span></div>
<div class="icon-cards__item d-flex align-items-center justify-content-center"><span class="h1">😊</span></div>
<div class="icon-cards__item d-flex align-items-center justify-content-center"><span class="h1">😀</span></div>
</div>
</figure>
<div class="checkbox">
<input class="d-none" id="toggle-animation" type="checkbox" checked />
<label class="checkbox__checkbox" for="toggle-animation"></label>
<label class="checkbox__label" for="toggle-animation">Toggle animation</label>
</div>CSS Code
Create a file style.css and paste the code below.
.icon-cards {
position: relative;
width: 60vw;
height: 40vw;
max-width: 380px;
max-height: 250px;
margin: 0;
color: white;
perspective: 1000px;
transform-origin: center;
}
.icon-cards__content {
position: absolute;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: translateZ(-30vw) rotateY(0);
animation: carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.icon-cards__content.step-animation {
animation: carousel 8s infinite steps(1) forwards;
}
.icon-cards__item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 60vw;
height: 40vw;
max-width: 380px;
max-height: 250px;
box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
border-radius: 6px;
transform-origin: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.icon-cards__item:nth-child(1) {
background: #fdd94f;
transform: rotateY(0) translateZ(35vw);
}
.icon-cards__item:nth-child(2) {
background: #f87949;
transform: rotateY(120deg) translateZ(35vw);
}
.icon-cards__item:nth-child(3) {
background: #fbab48;
transform: rotateY(240deg) translateZ(35vw);
}
@keyframes carousel {
0%, 17.5% {
transform: translateZ(-35vw) rotateY(0);
}
27.5%, 45% {
transform: translateZ(-35vw) rotateY(-120deg);
}
55%, 72.5% {
transform: translateZ(-35vw) rotateY(-240deg);
}
82.5%, 100% {
transform: translateZ(-35vw) rotateY(-360deg);
}
}
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #110f15;
}
.checkbox {
position: relative;
margin-top: 2rem;
font-size: 0.9rem;
font-weight: bold;
text-transform: uppercase;
color: #f47956;
transition: color 0.3s ease;
user-select: none;
}
.checkbox:hover {
color: #f7a95a;
}
.checkbox__checkbox {
position: relative;
top: 0;
width: 1.0625rem;
height: 1.0625rem;
background: white;
border: 1px solid currentColor;
border-radius: 4px;
vertical-align: middle;
transition: background 0.1s ease;
cursor: pointer;
}
.checkbox__checkbox::after {
content: '';
position: absolute;
top: 1px;
left: 5px;
width: 5px;
height: 11px;
opacity: 0;
transform: rotate(45deg) scale(0);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transition: all 0.3s ease;
transition-delay: 0.15s;
}
.checkbox__label {
margin-left: 5px;
vertical-align: middle;
cursor: pointer;
}
.checkbox > input:checked ~ .checkbox__checkbox {
border-color: transparent;
background: #f47956;
animation: jelly 0.6s ease;
}
.checkbox > input:checked ~ .checkbox__checkbox:after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
@keyframes jelly {
from {
transform: scale(1, 1);
}
30% {
transform: scale(1.25, 0.75);
}
40% {
transform: scale(0.75, 1.25);
}
50% {
transform: scale(1.15, 0.85);
}
65% {
transform: scale(0.95, 1.05);
}
75% {
transform: scale(1.05, 0.95);
}
to {
transform: scale(1, 1);
}
}
JavaScript Code
Create a file script.js and paste the code below.
function classToggle() {
var el = document.querySelector('.icon-cards__content');
el.classList.toggle('step-animation');
}
document.querySelector('#toggle-animation').addEventListener('click', classToggle);Final Output
Written by: Piyush Patil
Code Credits: edmundojr
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
