3D Card carousel using HTML and CSS

3D Card carousel using HTML and CSS

3D Card carousel using HTML and CSS

 
3D Card carousel using HTML and CSS
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 ByTheMOZZARELLA
Project DownloadLink Available Below
Language UsedHTML and CSS
External Link / DependenciesNO
ResponsiveYES
3D Card carousel project information

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">&#8592;</label>
<label for="swap-right-back">&#8594;</label>
<label for="swap-up-back">&#8593;</label>
<label for="swap-down-back">&#8595;</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">&#8592;</label>
<label for="swap-right-top">&#8594;</label>
<label for="swap-up-top">&#8593;</label>
<label for="swap-down-top">&#8595;</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">&#8592;</label>
<label for="swap-right-bottom">&#8594;</label>
<label for="swap-up-bottom">&#8593;</label>
<label for="swap-down-bottom">&#8595;</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">&#8592;</label>
<label for="swap-right-left">&#8594;</label>
<label for="swap-up-left">&#8593;</label>
<label for="swap-down-left">&#8595;</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">&#8592;</label>
<label for="swap-right-right">&#8594;</label>
<label for="swap-up-right">&#8593;</label>
<label for="swap-down-right">&#8595;</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">&#8592;</label>
<label for="swap-right-front">&#8594;</label>
<label for="swap-up-front">&#8593;</label>
<label for="swap-down-front">&#8595;</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

 
3D Card carousel using HTML and CSS
3D Card carousel using HTML and CSS

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 

 
3D Card carousel using HTML and CSS
3D Card carousel using HTML and CSS
 
3D Card carousel using HTML and CSS
3D Card carousel using HTML and CSS

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.



Leave a Reply