Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Image Effects >> CSS3 CardFlip Transition Effect


Code Snippet </> Info


Snippet Name: CSS3 CardFlip Transition Effect

Description: This is a CSS3 - Javascript transition effect code snippet. The demonstration is not using any images... but, you can substitute the front and back id with images. The source code is well commented and easy to figure out and adjust to your needs.
Example: View Code Demo

Note: Read the source code comments for instructions.

Author: Apple Inc.

Last Modified: 2015-12-13 06:42:44

Language: html

Highlight Mode: html

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>HTML5 CSS3 CardFlip Transition Effect</title> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width"> <link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css"> <style> /* Begin HTML5 CSS3 Card CardFlip Transition Effect */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Apple Inc. : https://developer.apple.com : Creative Commons License 3.0+ == */ /* == Modified by: Snap Builder == */ /* Abstract: Defines CSS properties for the CardFlip sample. Defines and styles the playing card on the "Card Flip" page. Applies 3D transform and transition effects to the card. Hides its "back-side" when it is flipped. */ html {margin:0; padding:0;} BODY {font-family:verdana,arial,ms sans serif; font-size:100%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.3); -webkit-user-select:none;} a {color:#69C;text-decoration:none;} a:hover {color:#F60; text-decoration:underline;} #wrapper {margin:0; padding:15px 15px 15px 15px;} /* Styles the "Card Flip" page and creates a placeholder for the card */ #container { /* Set these dimensions so the card can be properly displayed in Safari on iPhone */ height:356px; width:320px; /* set thecontainer background color */ background-color:transparent; /* Disable tap highlighting */ -webkit-tap-highlight-color:rgba(0,0,0,0); /* Give some depth to the card */ -webkit-perspective: 600; } /* Applies 3D transform and transition effects to the card. The card has two states: regular and flipped. A card is in a regular state when there is an empty transform applied to it, and otherwise in a flipped state, where there is a rotational transformation applied. This class is used when the card is in the regular state. The "card flipped" class is used when the card is in the flipped state. */ .card { position:absolute; height:300px; width:200px; left:60px; top:28px; /* Ensure that the card lives correctly in 3D space */ -webkit-transform-style:preserve-3d; /* We apply this property to the card so it can smoothly flip between its sides */ -webkit-transition-property:-webkit-transform; /* Make the animation occur over a period of 1.5 seconds */ -webkit-transition-duration:1.5s; } /* Applies the flip animation to the card */ .card.flipped { /* Rotate the card 180 degrees along the y-axis. This animation allows the card to toggle between its regular and flipped states. */ -webkit-transform: rotateY(180deg); } /* Styles the card and hides its "back side" when the card is flipped */ .face { position:absolute; height:300px; width:200px; /* Give a round layout to the card */ -webkit-border-radius:10px; /* Drop shadow around the card */ -webkit-box-shadow:0px 2px 6px rgba(0, 0, 0, 0.5); /* Make sure that users will not be able to select anything on the card */ /* We create the card by stacking two div elements at the exact same location. The back of the card is shown when we rotated the card 180 degrees along the y-axis. Setting this property to hidden ensures that the "back side" is hidden when the card is flipped */ -webkit-backface-visibility:hidden; } /* Styles the suit characters */ .face > p { margin-top:36px; margin-bottom:0; text-align:center; font-size:92px; } /* Styles the front of the card */ .front { /* Set the color of the suit characters on the card */ color:rgb(78,150,249); /* Background color of this side of the card */ background-color:rgb(34,65,108); } /* Styles the back of the card */ .back { color:rgb(34,65,108); background-color:rgba(78,150,249,0.5); /* Ensure the "back side" is flipped already */ -webkit-transform:rotateY(180deg); } div #source {position:absolute; top:430px; left:30px;} </style> </head> <body> <div id="wrapper"> <div id="container"> <!-- Shows a card with suit characters. We use the ascii table to display these suit characters. --> <div id="card" class="card" onclick="flip(event)"> <!-- The front and face classes are respectively used to style the front and back of the card --> <!-- Shows the front of the card. Shown when this page initially loads in Safari on iPhone 2.0 or in iPhone simulator. --> <div id="front" class="front face"><p>&#9824; &#9830;<br> &#9827; &#9829;</p></div> <!-- Shows the back of the card. Hidden when this page initially loads in Safari on iPhone 2.0 or in iPhone simulator. --> <div id="back" class="back face"><p>&#9830; &#9824;<br> &#9829; &#9827;</p></div> </div> </div> <div id="source"> <h3>HTML5 CSS3 CardFlip Transition Effect</h3> <br /><br /> [ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=228"> HTML5 CSS3 Card Deck Image Gallery Transition Effect Code Snippet</a> page. ] </div> </div> <script> /* Triggers transition between both states of the card: regular and flipped. A card is in a regular state when there is an empty transform applied to it, and otherwise in a flipped state, where there is a rotational transformation applied. The CSS "card" class is used when the card is in a regular state. The "card flipped" class is used when the card is in a flipped state. This function is called when users tap on the "card" div element. It checks this div's current CSS classname attribute. If the current classname is "card," then change it to "card flipped" and "card," or otherwise. */ function flip (event) { var element = event.currentTarget; /* Toggle the setting of the classname attribute */ element.className = (element.className == 'card') ? 'card flipped' : 'card'; } </script> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library