Creating Flip Card with CSS

CSS flip card: How can I activate the flip via tab, so it is keyboard accessible?

You can use :focus-within pseudo-class:

.flip-card:focus-within .flip-card-inner

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {  background-color: transparent;  width: 300px;  height: 200px;  // border: 1px solid #f1f1f1;  // perspective: 1000px; /* Remove this if you don't want the 3D effect */}

/* This container is needed to position the front and back side */
.flip-card-inner {  position: relative;  width: 100%;  height: 100%;  text-align: center;  transition: transform 0.8s;  transform-style: preserve-3d;}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner,.flip-card:focus-within .flip-card-inner,.flip-card:active .flip-card-inner,.flip-card:focus .flip-card-inner {  transform: rotateY(180deg);}

/* Position the front and back side */
.flip-card-front,.flip-card-back {  position: absolute;  width: 100%;  height: 100%;  -webkit-backface-visibility: hidden;  /* Safari */  backface-visibility: hidden;}

/* Style the front side (fallback if image is missing) */
.flip-card-front {  background-color: #008CCC;  background-color: azure;  color: white;  color: black;}

/* Style the back side */
.flip-card-back {  background-color: #99CC66;  color: white;  transform: rotateY(180deg);}
<div id="content">  <h1>Small Business Resources</h1>
  <input type="text">  <br><br>
  <div class="flip-card">    <div class="flip-card-inner">      <a href="#" id="flip-card-inner">        <div class="flip-card-front">          <div>Card-front content</div>        </div>      </a>      <div class="flip-card-back">        <a href="https://www.google.com">Google</a>        <div>Text</div>      </div>    </div>  </div>
</div><!-- end #content -->

CSS flip card - how do I make the front smaller than the back

Just add height: auto; to .flip-card-front.

I also added pointer-events: none; to .flip-card and added pointer-events: auto; to .flip-card-front, .flip-card-back for hover bug.

.flip-card {
  background-color: transparent;
  width: 19%;
  /* change the below */
  height: 400px;
  margin: auto;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
  pointer-events: none;
}

/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner,
.flip-card:active .flip-card-inner,
.flip-card:focus .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  pointer-events: auto;
}

/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #008CCC;
  color: white;
  text-align: center;
  height: auto;
}

.flip-card-back {
  background-color: #E7E7E7;
  color: black;
  transform: rotateY(180deg);
  /* change the below */
  height: 400px;
}

.flip-card-back ul {
  padding-left: 1em;
  padding-right: 1em;
  list-style-type: none;
}

.flip-card-back li {
  border-bottom: 1px solid black;
}

.flip-card-back li:last-child {
  border-bottom: none;
}

.flip-card-back h2 {
  text-align: center;
  background-color: black;
  color: white;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.flip-card-back h2 a,
.flip-card-back h2 a:visited {
  color: white;
}

.flip-card-back a {
  display: block;
}

.front-title {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

.flip-cards {
  display: flex;
}

.sbr-intro {
  margin-bottom: 1em;
}
<div class="flip-cards">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h2 class="front-title">Prepare Your Business</h2>
      </div>
      <div class="flip-card-back">
        <h2>Content</h2>
      </div>
    </div>
  </div>
</div>

How to create a flip card in css with checkbox?

You have a typo in your HTML just change the className property to class.

CSS card flip effect - how to make it flip in the same direction with every click?

It has to be done via script (check this SO question). So by editing the example you followed, we can do it this way:

$('.flip-container').each(function(i) {
    var thisFlipper = $(this).find('.flipper');
    var rotate = 0;
    thisFlipper.on('click', function(e) {
        rotate += 180;
        thisFlipper.css({'transform': 'rotateY('+rotate+'deg)'});
    });
});
.flip-container {
    perspective: 800px;
}

.flip-container,
.front,
.back {
    width: 250px;
    height: 250px;
}

/* flip speed */
.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */

.back {
    background-color: #ff0000;
    transform: rotateY(180deg);
}

.artist-1 {
    background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
    background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>

CSS: Determine height of flip card in grid automatically without js

Don't use position:absolute to achieve this. Rely on CSS grid and make both the front and the back of the card on the same area so they overlap while still being in flow element so the area will be defined with the biggest height:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.flip-card {
  overflow: hidden;
  perspective: 1000px;
}

.flip-card-inner {
  display: grid; /* here */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  grid-area: 1/1; /*and here */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  background-color: red;
  transform: rotateY(180deg);
}

img {
  max-width: 100%
}
<div class="grid-container">

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

</div>

How to auto flip CSS cards till some duration and make them disappear from screen on a button click?

I set the required functions. You can call them depending on the usage you want

var elems = document.getElementsByClassName('flip-box-inner');
var totalSecond = 0;
var myTimer;
function RotationCard() {
    totalSecond = totalSecond + 1;
    for (var i = 0; i < elems.length; i++) {
     if(totalSecond == 1)
     {
         if(i%2 == 0)
         {
            if(!elems[i].classList.contains("myAnim"))
                elems[i].classList.add("myAnim");
             else
                elems[i].classList.remove("myAnim");
         }
     }
     else
     {
         if(!elems[i].classList.contains("myAnim"))
            elems[i].classList.add("myAnim");
          else
            elems[i].classList.remove("myAnim");
     }
   }
           
            
   if (totalSecond <= 10) {               
       myTimer = setTimeout(RotationCard, 1000);
   }
   else
   {
       ResetAndClearCard();
   }
}
        
        
function SelectCard()
{
    ResetAndClearCard();
    var rand = Math.floor(Math.random() * 10) + 1;
    for (var i = 0; i < elems.length; i++) {            
       if(rand == i)
           elems[i].classList.add("myAnim");
    }
}
        
function ResetAndClearCard()
{
    totalSecond = 0;
    clearTimeout(myTimer);
    for (var i = 0; i < elems.length; i++) {          
        if(elems[i].classList.contains("myAnim"))
            elems[i].classList.remove("myAnim");                  
    }
}
body {
  font-family: Arial, Helvetica, sans-serif;
  text-align:center;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  display:inline-block;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}

.myAnim
{
  transform: rotateY(180deg);
  transition: transform 0.8s;
}
.btn1
{
   height:30px;
   bordder:1px solid #ddd;
   width:150px;
   background:#228833;
   color:white;
}

.btn2
{
   height:30px;
   bordder:1px solid #ddd;
   width:150px;
   background:#2233ff;
   color:white;
}

.btn3
{
   height:30px;
   bordder:1px solid #ddd;
   width:180px;
   background:#ff2266;
   color:white;
}

.btn1:hover,.btn2:hover,.btn3:hover
{
   background:#223366;
}
<button class="btn1" onclick="RotationCard()">rotation</button>
<button class="btn2" onclick="SelectCard()">select</button>
<button class="btn3" onclick="ResetAndClearCard()">reset & clear Timer</button>
</div>

<h1>Image Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

Related Topics

Angular Error: Postcss Received Undefined Instead of CSS String

Generate PDF with CSS and Images

What Is a Pixel (Px) in CSS

How to Make Rounded Tabs with CSS

Nested Mixins or Functions in Sass

Borderradius Style Property Not Rounding The Edges in Reactjs

CSS: Text-Align-Last Doesnt Work in Chrome

Hide All Text Except for The First Letter with CSS

Making a Row of Divs All Be The Same Height Using CSS

Twitter Bootstrap Navigation Bar Fixed

Empty Div with Red Border Is Visible as a Red Line - How to Hide It Only with CSS

Clearfix with Twitter Bootstrap

How to Align Reveal.Js Slides to The Top of The Page

How to Turn Off View Encapsulation for One Property in Angular 2

Why Does a Media Query with a Smaller Min-Width Overwrite a Larger One

Can a Child Div Have a Higher Opacity Than Parent with CSS

How to Draw Triangle with Transparent Background with Border

Zurb Foundation - Many Duplicate CSS Entries


Leave a reply



Submit