3D Card carousel using HTML and CSS
Welcome to Code With Random blog. In this blog, we learn how to create a 3D Card carousel Project. We use HTML and CSS for 3D Card carousel. Hope you enjoy our blog so let’s start with a basic HTML Structure for the 3D Card carousel.
| Code By | TheMOZZARELLA |
| Project Download | Link Available Below |
| Language Used | HTML and CSS |
| External Link / Dependencies | NO |
| Responsive | YES |
HTML Code For Carousel
Create a HTML file give name index.html and copy the html code given below and paste it in you HTML file.
<div class="container-3D"> <input type="radio" id="swap-left-front" name="swapper" value="swap-left"> <input type="radio" id="swap-right-front" name="swapper" value="swap-right"> <input type="radio" id="swap-up-front" name="swapper" value="swap-up"> <input type="radio" id="swap-down-front" name="swapper" value="swap-down"> <input type="radio" id="swap-left-back" name="swapper" value="swap-left"> <input type="radio" id="swap-right-back" name="swapper" value="swap-right"> <input type="radio" id="swap-up-back" name="swapper" value="swap-up"> <input type="radio" id="swap-down-back" name="swapper" value="swap-down"> <input type="radio" id="swap-left-top" name="swapper" value="swap-left"> <input type="radio" id="swap-right-top" name="swapper" value="swap-right"> <input type="radio" id="swap-up-top" name="swapper" value="swap-up"> <input type="radio" id="swap-down-top" name="swapper" value="swap-down"> <input type="radio" id="swap-left-bottom" name="swapper" value="swap-left"> <input type="radio" id="swap-right-bottom" name="swapper" value="swap-right"> <input type="radio" id="swap-up-bottom" name="swapper" value="swap-up"> <input type="radio" id="swap-down-bottom" name="swapper" value="swap-down"> <input type="radio" id="swap-left-left" name="swapper" value="swap-left"> <input type="radio" id="swap-right-left" name="swapper" value="swap-right"> <input type="radio" id="swap-up-left" name="swapper" value="swap-up"> <input type="radio" id="swap-down-left" name="swapper" value="swap-down"> <input type="radio" id="swap-left-right" name="swapper" value="swap-left"> <input type="radio" id="swap-right-right" name="swapper" value="swap-right"> <input type="radio" id="swap-up-right" name="swapper" value="swap-up"> <input type="radio" id="swap-down-right" name="swapper" value="swap-down"> <div class="flopper"> <figure class="back"> <label for="swap-left-back">←</label> <label for="swap-right-back">→</label> <label for="swap-up-back">↑</label> <label for="swap-down-back">↓</label> <div></div> <h2>Palace</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="javascript:void(0);" title="Learn More">Learn More</a> </figure> <figure class="top"> <label for="swap-left-top">←</label> <label for="swap-right-top">→</label> <label for="swap-up-top">↑</label> <label for="swap-down-top">↓</label> <div></div> <h2>Tools</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="javascript:void(0);" title="Learn More">Learn More</a> </figure> <figure class="bottom"> <label for="swap-left-bottom">←</label> <label for="swap-right-bottom">→</label> <label for="swap-up-bottom">↑</label> <label for="swap-down-bottom">↓</label> <div></div> <h2>Clouds</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="javascript:void(0);" title="Learn More">Learn More</a> </figure> <figure class="left"> <label for="swap-left-left">←</label> <label for="swap-right-left">→</label> <label for="swap-up-left">↑</label> <label for="swap-down-left">↓</label> <div></div> <h2>Birds</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="javascript:void(0);" title="Learn More">Learn More</a> </figure> <figure class="right"> <label for="swap-left-right">←</label> <label for="swap-right-right">→</label> <label for="swap-up-right">↑</label> <label for="swap-down-right">↓</label> <div></div> <h2>Concert</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="javascript:void(0);" title="Learn More">Learn More</a> </figure> <figure class="front"> <label for="swap-left-front">←</label> <label for="swap-right-front">→</label> <label for="swap-up-front">↑</label> <label for="swap-down-front">↓</label> <div></div> <h2>Big Water</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="javascript:void(0);" title="Learn More">Learn More</a> </figure> </div> </div>
There is all Html Code for the 3D Card carousel . Now, you can see output without Css, then we write Css for the 3D Card carousel.
50+ Html ,Css & Javascript Projects With Source Code
Only Html Code Output
CSS Code For 3D Card carousel
After adding HTML code in your index.html file, let’s create a CSS file give name as style.css and then copy all the CSS code given below and paste it in your style.css file.
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Poppins", sans-serif;
transform-style: preserve-3d;
}
body,
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 12pt;
line-height: 18pt;
font-weight: 400;
color: white;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #444;
margin: 0;
}
.container-3D {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
}
.flopper {
position: relative;
width: auto;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: visible;
transition: all 0.5s ease-in-out;
/*animation: rotate 6s linear infinite;*/
}
figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
width: 300px;
height: 300px;
transform-origin: 50% 50%;
padding: 20px 25px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
border: 1px solid white;
}
figure div {
width: 100%;
height: 100px;
background: url("https://picsum.photos/id/237/1280/720");
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.front div {
background: url("https://picsum.photos/id/404/1280/720");
}
.left div {
background: url("https://picsum.photos/id/611/1280/720");
}
.right div {
background: url("https://picsum.photos/id/117/1280/720");
}
.back div {
background: url("https://picsum.photos/id/142/1280/720");
}
.bottom div {
background: url("https://picsum.photos/id/888/1280/720");
}
.top div {
background: url("https://picsum.photos/id/491/1280/720");
}
figure h2 {
font-size: 20pt;
line-height: 20pt;
margin: 20px 0px 10px 0px;
}
figure p {
font-size: 12pt;
line-height: 18pt;
margin: 0 0 15px 0;
text-align: center;
}
figure a {
position: relative;
width: 130px;
height: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: white;
color: black;
text-decoration: none;
z-index: 1;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
figure a::after {
position: absolute;
content: "";
bottom: 100%;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: -1;
transition: all 0.3s ease-in-out;
}
figure a:hover::after {
bottom: 0;
transition: all 0.3s ease-in-out;
}
figure a:hover {
color: white;
transition: all 0.3s ease-in-out;
}
.front {
transform: translateZ(150px);
background: #1be7ff;
--face_color: #1be7ff;
}
.back {
transform: rotateY(180deg) translateZ(150px);
background: #6eeb83;
--face_color: #6eeb83;
}
.top {
transform: rotateX(90deg) translateZ(150px);
background: #e4ff1a;
--face_color: #e4ff1a;
}
.bottom {
transform: rotateX(-90deg) translateZ(150px);
background: #e8aa14;
--face_color: #e8aa14;
}
.left {
transform: rotateY(-90deg) translateZ(150px);
background: #ff5714;
--face_color: #ff5714;
}
.right {
transform: rotateY(90deg) translateZ(150px);
background: black;
--face_color: black;
}
.front h2,
.front p,
.back h2,
.back p,
.top h2,
.top p,
.bottom h2,
.bottom p {
color: black;
}
.front a,
.back a,
.top a,
.bottom a {
background: black;
color: white;
}
.front a::after,
.back a::after,
.top a::after,
.bottom a::after {
background: white;
}
.front a:hover,
.back a:hover,
.top a:hover,
.bottom a:hover {
color: black;
}
label {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--face_color);
color: black;
font-size: 14pt;
margin: 0;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
label:hover {
cursor: pointer;
}
label:nth-child(1) {
left: -55px;
padding-bottom: 5px;
}
label:nth-child(2) {
right: -55px;
padding-bottom: 5px;
}
label:nth-child(3) {
top: -55px;
}
label:nth-child(4) {
bottom: -55px;
}
.right label {
color: white;
}
.left label {
color: white;
}
#swap-left-front:checked ~ .flopper {
transform: rotateY(90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-front:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-up-front:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-front:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
#swap-left-back:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-back:checked ~ .flopper {
transform: rotateY(-270deg);
transition: all 0.5s ease-in-out;
}
#swap-up-back:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-back:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
#swap-left-top:checked ~ .flopper {
transform: rotateY(90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-top:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-up-top:checked ~ .flopper {
transform: rotateY(-180deg);
transition: all 0.5s ease-in-out;
}
#swap-down-top:checked ~ .flopper {
transform: rotateX(0deg);
transition: all 0.5s ease-in-out;
}
#swap-left-bottom:checked ~ .flopper {
transform: rotateY(90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-bottom:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-up-bottom:checked ~ .flopper {
transform: rotateX(0deg);
transition: all 0.5s ease-in-out;
}
#swap-down-bottom:checked ~ .flopper {
transform: rotateY(180deg);
transition: all 0.5s ease-in-out;
}
#swap-left-left:checked ~ .flopper {
transform: rotateY(180deg);
transition: all 0.5s ease-in-out;
}
#swap-right-left:checked ~ .flopper {
transform: rotateY(-360deg);
transition: all 0.5s ease-in-out;
}
#swap-up-left:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-left:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
#swap-left-right:checked ~ .flopper {
transform: rotateY(0deg);
transition: all 0.5s ease-in-out;
}
#swap-right-right:checked ~ .flopper {
transform: rotateY(-180deg);
transition: all 0.5s ease-in-out;
}
#swap-up-right:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-right:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
input {
display: none;
}
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
50% {
transform: rotateY(180deg) rotateX(30deg);
}
100% {
transform: rotateY(360deg) rotateX(0deg);
}
}
@media (max-height: 435px), @media (max-width: 435px) {
figure {
width: 250px;
height: 250px;
}
.front {
transform: translateZ(125px);
}
.back {
transform: rotateY(180deg) translateZ(125px);
}
.top {
transform: rotateX(90deg) translateZ(125px);
}
.bottom {
transform: rotateX(-90deg) translateZ(125px);
}
.left {
transform: rotateY(-90deg) translateZ(125px);
}
.right {
transform: rotateY(90deg) translateZ(125px);
}
figure div {
height: 80px;
}
figure h2 {
font-size: 18pt;
line-height: 18pt;
}
figure p {
font-size: 11pt;
line-height: 15pt;
}
figure a {
height: 60px;
}
label {
width: 30px;
height: 30px;
font-size: 12pt;
}
label:nth-child(1) {
left: -40px;
}
label:nth-child(2) {
right: -40px;
}
label:nth-child(3) {
top: -40px;
}
label:nth-child(4) {
bottom: -40px;
}
}Amazing! Now we have completed our 3D Card carousel Project. Here is our updated output With Html and Css.
Final Output Of Card Carousel Using HTML and CSS only
Live Preview Of 3D Card Carousel Using HTML and CSS
Restaurant Website Using HTML And CSS With Source Code
Now we have completed our 3D Card carousel. Here is our updated output with Css. I hope you like the 3D Card carousel, you can see output project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you>>!
In this post, we learn how to create a 3D Card carousel Using HTML and CSS only. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by – Code With Random/Anki
code by – @TheMOZZARELLA
How to create 3d card carousel using CSS?
to create a 3D Card carousel Project. We use HTML and CSS for 3D Card carousel. Create A HTML File Give Name Index.Html And Copy The Html Code Given Below And Paste It In You HTML File.
3D card carousel using CSS only
Create A HTML File Give Name Index.Html And Copy The Html Code Given Below And Paste It In You HTML File.
After Adding HTML Code In Your Index.Html File, Let’s Create A CSS file Give Name As Style.Css And Then Copy All The CSS Code Given Below And Paste It In Your Style.Css File.
