CARD FLIP ANIMATION

Your text here. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly.
Your text here. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly.
Your text here. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly.
Your text here. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly.

Click on the boxes above to make them flip like a card.

Follow these steps to implement this animation:

1. For Jquery:

a) Make sure a link to the Jquery library is included on your site or page (our theme already includes this) BEFORE any JQuery code.

b) If you want to put the jQuery code into an html page, wrap the code below in script tags and insert it into the page. Or insert the following code into an external .js file and call that file on your site/page. (Our theme already calls it's scripts.js file in the footer.)

  
            jQuery( document ).ready(function() {
                 jQuery(".cardFlipContainer .cardFlipTrigger").click(function(){
                 jQuery(this).toggleClass("flipped");
                 });
            }); 
            
            
//You can remove the outer jQuery( document ).ready(function() { wrapper if inserting into a previosuly exisitng document ready function.

For CSS:


        .displayFlex {
            display: flex; /*if using in our theme, you can remove this declaration as it is alrady in style.css. You can also remove this if your using only one card flip animation by itself on a row*/
        }
        .cardFlipContainer {
            perspective: 800px; 
            flex: 1;
            /*"flex: 1;" can be removed if you are using only one card flip animation by itself on a row*/
        }
        .cardFlipTrigger {
            transition: transform 1s; 
            transform-style: preserve-3d; 
            transform-origin: 50% 50%;
            margin: 0 40px;
            /*adjust margin about as required*/
        }
        .cardFlipTrigger .front {
            position: relative;
             -webkit-backface-visibility: hidden;  /* Safari  still needs this in 2020!*/
            backface-visibility: hidden;
            cursor: pointer;
            padding: 40px;
            background: #00ceff;
            color: white;
            /*adjust padding, background and color as needed*/
         }
        .cardFlipTrigger .back {
            position: absolute; 
            top: 50%;
            transform: rotateY( 180deg ) translateY(-50%);
             -webkit-backface-visibility: hidden;  /* Safari  still needs this in 2020!*/
            backface-visibility: hidden;
            box-sizing: border-box;
            cursor: pointer;
            background: #ff8300;
            padding: 40px;
            /*adjust padding, background and color as needed*/
        }
        .cardFlipTrigger.flipped {
            /*class "flipped" toggled by Juery in js/scripts.js*/
            transform: rotateY( 180deg );
        }
        



NOTES:


i) On the html element "cardFlipContainer" perspective: 800px; enables the 3D effect on flip.  "800" can be any positive integer (with "px" only).  The lower the number the greater the 3D effect. Must be on the PARENT of the item that TRIGGERS the animation.


i) On the html element "cardFlipTrigger" transition: transform 1s; "transition" means that on this element's change-of-state (i.e. when Jquery adds the class "flipped" to "cardFlipTrigger") the transform defined in the "flipped" class is performed.  "1s" is how much time that transition should take and may be adjusted to any positive number (in seconds ("s") or milliseconds ("ms"). transform-style: preserve-3d; allows the content of the children html elements "front" and "back" to correctly orient itself on flipping (otherwise text appears as a mirror image on flipping). transform-origin: 50% 50%;  defines the transform origin for the amimation.  We want this anaimation to tranform in the middle with 50% 50%.  See the css spec for other possible settings.


iii) for html elements "front" and "back" (both siblings inside "cardFlipTrigger html parent element) backface-visibility: hidden; determines whether or not the back face of its SIBLING element is visible when facing the user. The back face of any two siblings defaults to a transparent background, meaning that the content of "front" would show through when the content of "back" was showing (and vice versa). To prevent this, we set backface visibility to "hidden" on both siblings. Note also that position: absolute; set on the "back" html element prevents the "front" (set to "position: relative" element from pushing "back" content down by default.


iv) On html elments "flipped" and "back" transform: rotateY( 180deg ); Defines the transformation, where "(180deg) can take any integer (even beyond 360) in "deg".  "rotateY" can be changed to "rotateX" so that the animation occurs on the X-axis instead. For a fuller explanation of how this animation works, see the end of section "3" below.

3. For the HTML (in white only, below):


        <div class="displayFlex alignItemsCenter">
            <div class="cardFlipContainer flexItem">
              <div class="cardFlipTrigger">
                <div class="front">Your front content here.</div>
                <div class="back">Your back content here.</div>
              </div>
            </div>
              <div class="cardFlipTrigger">
                <div class="front">Your front content here.</div>
                <div class="back">Your back content here. </div>
              </div>
          </div>
          
          
NOTE: The "div class="displayFlex alignItemsCenter" wraper and its ending div and any "flexItem" classes may be removed if flex is not or if you dont' need two or more card flips on the same line.

          
Basically how the flip works is that the class "back"--which is the class attribute for the content on the back of the card-- is rotated by 180 degrees, which makes it not show, so the "front" html element shows by it's default CSS.  Then, on the first click, Jquery adds the class "flipped" to the PARENT element ("cardFlipTrigger") which causes the entire parent element ITSELF to rotate 180 degreees, thereby exposing the "back" (that was itself roated by 180 degrees initally to hide it) and hiding the "front" element.  On the second click, the "flipped" class is removed, so the PARENT ("cardFlipTrigger") is not longer rotaed 180 degrees, so the "back" html elment no longer shows (because it is roated 180 degrees by default) but the "front" element now shows again.