Home Animation / CSS / Tutorials

How to Make Turning Cards Animation in 3D with CSS Only

How to Make Turning Cards Animation in 3D with CSS Only

Back with me, for today's article, I will try to share a tutorial on how to make turning cards animation in 3D with CSS only.

Where this only requires CSS only, no javascript at all.

This is quite interesting for you to understand because it is good from a UI perspective.

Now for those of you who want to try it, you don't need to bother you just copy the codes that I have shared below.

How to Make Turning Cards Animation in 3D with CSS Only

1. Create the CSS first


.container,
.card {
  border-radius: 25px;
  border: double 5px transparent;
  /*Set both inset and outset box shadow using CSS, separated by , */
  box-shadow: inset -10px -10px 80px 1px rgba(0, 0, 0, 0.3),
    10px 20px 50px 10px rgba(0, 0, 0, 0.5);
}

.container {
  perspective: 660px; /*This gives  perspective */
  width: 800px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 30px;
  background-image: linear-gradient(to bottom right, #aaa, #434);
}

.card {
  color: #555;
  text-shadow: 1px 3px 3px rgba(255, 255, 255, 0.7);
  width: 230px;
  height: 200px;
  float: left;
  padding: 20px;
  margin: 15px;
  margin-right: -32px;
  background: #eee;
  background-image: linear-gradient(110deg, #ddd, #888);
  opacity: 0.9;
  backdrop-filter: blur(5px);

  /* Animation attributes */
  animation-name: turn-animation; /* any name what you give */
  animation-duration: 6000ms; /* length of one animation cycle*/
  animation-iteration-count: infinite; /* repeats forever */
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
}

/* Animation keyframes */
@keyframes turn-animation {
  0%,
  100% {
    /*Card position at start and end */
    transform: rotate3d(0, 1, 0, 10deg);
  }
  /* Experiment with these numbers at 50% -> */
  50% {
    transform: rotate3d(0, 1, -0.2, 45deg);
  }
}

/* THE COLORED CARDS */
.top_card {
  background-image: linear-gradient(-70deg, #09c, #5f9);
}

.middle_card {
  background-image: linear-gradient(-70deg, #505, #f68);
  color: #000;
  text-shadow: -2px -2px 3px rgba(255, 255, 255, 0.7);
}

.bottom_card {
  background-image: linear-gradient(-70deg, #03a, #c6f);

  font-size: 1.3em;
  text-shadow: 1px 3px 3px rgba(255, 255, 255, 0.7);
}

/* ALL CARD HOVER */
.card:hover {
  opacity: 0.7;
  background-image: linear-gradient(-70deg, #627, #9a9);
  color: #223;
}

.top_card:hover {
  background-image: linear-gradient(-70deg, #90c, #5f9);
}

.middle_card:hover {
  background-image: linear-gradient(-70deg, #90c, #5f9);
}

.bottom_card:hover {
  background-image: linear-gradient(-70deg, #90c, #5f9);
}

.signo {
  margin: auto;
  color: #a8a;
  position: absolute;
  bottom: 10px;
  right: 14px;
}

.signo:hover {
  color: #fff;
  text-decoration: underline;
}

Please copy the CSS code above, and copy it into style.css

2. Create the HTML


<div style="height:80px;"></div>
  <div class="container">
    <div class="card top_card">
      <h1>Hello</h1>This is a demo for a no-js, css-only perspective card animation
    </div>
    <div class="card"></div>
    <div class="card"></div>

    <div class="card">CSS:</br></br>.container {<br> &nbsp; perspective: 660px;<br>}<br><br>.card<br>{<br> &nbsp; transform:<br> &nbsp; rotate3d(0, 1,-.2, 45deg);</br>}</div>
    <div class="card middle_card">
      <h1>
        < />
      </h1>
    </div>
    <div class="card "></div>

    <div class="card">Every card ends up in a different angle</div>
    <div class="card"></div>
    <div class="card bottom_card"></div>
  </div>

Copy the HTML above again and copy it into index.html

If so, please see the final result.

What do you think? Very easy isn't it?

Ok, I think that's enough for this tutorial on how to make turning cards animation in 3D with CSS only. Hopefully useful and good luck trying it.

Also read:

No comments:

Post a Comment

Attention Before Commenting and Pay Attention to The Following Policies!!!

Commenting Rules:

1. Don't Spam
2. No Active Links
3. Comment Wisely
4. Profanity, Foul Language, Harassment, and So on.

Top