Create Rotating Card with CSS

Introduction

In this lab, we will explore the concept of creating a rotating card using CSS. The purpose of this lab is to teach you how to create an interactive and engaging UI element that can be used to display information or images. By the end of this lab, you will have a solid understanding of how to use CSS to create dynamic and visually appealing web content.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/colors -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/box_model -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/margin_and_padding -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/borders -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/width_and_height -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/positioning -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/backgrounds -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/mobile_first_design -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/transitions -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/transformations -.-> lab-35235{{"`Create Rotating Card with CSS`"}} css/pseudo_classes -.-> lab-35235{{"`Create Rotating Card with CSS`"}} end

Rotating Card

index.html and style.css have already been provided in the VM.

To create a two-sided card that rotates on hover, follow these steps:

Set the backface-visibility of the cards to none to prevent the backside from being visible by default.
Initially, set rotateY(-180deg) for the back side of the card and rotateY(0deg) for the front side of the card.
Upon hover, set rotateY(180deg) for the front side of the card and rotateY(0deg) for the back side of the card.
Set the appropriate perspective value to create the rotate effect.

Here is an example HTML and CSS code:

<div class="card">
  <div class="card-side front">
    <div>Front Side</div>
  </div>
  <div class="card-side back">
    <div>Back Side</div>
  </div>
</div>

.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
}

.card-side {
  height: 35rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  padding: 2rem;
  color: white;
}

.card-side.back {
  transform: rotateY(-180deg);
  background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
}

.card-side.front {
  background: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.card:hover .card-side.front {
  transform: rotateY(180deg);
}

.card:hover .card-side.back {
  transform: rotateY(0deg);
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Rotating Card lab. You can practice more labs in LabEx to improve your skills.

Create Rotating Card with CSS

Introduction

Skills Graph

Rotating Card

Summary

Other CSS Tutorials you may like