FLipCard Script

Friday, July 31, 2020
Avatar1

Rockin Around The Christmas Tree

Artist

Lyrics



Avatar2

Oh Christmas Tree

Artist

Lyrics



Avatar3

Winter Wonderland

Artist

Lyrics



Avatar4

Silver Bells

Artist

Lyrics



Avatar5

Noel ...

Artist

Lyrics



Avatar6

Rockin Around The Christmas Tree

Artist

Lyrics



Avatar7

Run Run Rudolph

Artist

Lyrics



Avatar7

White Christmas

Artist

Lyrics


Original Playbuzz Game at PennyPinchin4u

CODE

<STYLE>
/* 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: 300px;
  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 {
  transform: rotateX(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: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #f5f5f5;
  color: white;
  transform: rotateX(180deg);
}</STYLE>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://img.playbuzz.com/image/upload/ar_1.3333333333333333,c_crop/q_auto:good,f_auto,fl_lossy,w_640,c_limit,dpr_1.5/v1559291741/zvhalufsbpz0t6pzqiux.png" alt="Avatar1" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Rockin Around The Christmas Tree</h1>
      <p>Artist</p>
      <p>Lyrics</p>
    </div>
  </div>
</div>
Note: To do a vertical flip instead of a horizontal, use the rotateX method instead of rotateY: 
Example:
.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-back {
  transform: rotateX(180deg);
}
Thanks For Visiting
Copyright © 2018 - Creative eXpressions
Sources: ... FlipBook ... Scribed ... PDF
This Site is in no way apart of, with, or associated with The Walt Disney Company. Some content is Copyright © The Walt Disney Company. All images are copyrighted © and owned by their respective holders. No parts of this site are to be reproduced without written permission. 
These books are for educational purposes only!! 
**FAIR USE** Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education and research.
Tags
Reactions