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

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Image Effects >> Styled Card (Basic Horizontal Flip) Flipping Animation


Code Snippet </> Info


Snippet Name: Styled Card (Basic Horizontal Flip) Flipping Animation

Description: Add a horizontal flipping styled card for showing information on the back side of your boxes.
Example: View Code Demo

Note:

Author: David Walsh

Last Modified: 2015-03-19 23:35:56

Language: css

Highlight Mode: css

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 xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>Create a HTML5 CSS3 Styled Card (Basic Horizontal Flip) Flipping Animation</title> <meta name="description" content="CSS3 styled card (vertical flip) flipping animation effect uses CSS animations (transitions) to show the front and back of an element." /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* Begin HTML5 CSS3 Styled Card (Basic Horizontal Flip) Flipping Animation */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://www.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: David Walsh : http://davidwalsh.name/ : Creative Commons License == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; border: 1px solid #ccc; } /* .flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); filter: FlipH; -ms-filter: "FlipH"; } */ /* START: Accommodating for IE */ .flip-container:hover .back, .flip-container.hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .flip-container:hover .front, .flip-container.hover .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* END: Accommodating for IE */ .flip-container, .front, .back { width: 332px; /* set the flip container to match image width */ height: 500px; /* set the flip container to match image height */ } .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -o-transition: 0.6s; -o-transform-style: preserve-3d; -ms-transition: 0.6s; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .front { padding:10px 10px 10px 10px; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); background:#007730; color:#ffffff; z-index: 2; } .back { padding:10px 10px 10px 10px; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); background:#dddddd; } .front .name { font-size: 2em; display: inline-block; background: rgba(33, 33, 33, 0.9); color: #f8f8f8; font-family: Courier; padding: 5px 10px; border-radius: 5px; bottom: 60px; left: 25%; position: absolute; text-shadow: 0.1em 0.1em 0.05em #333; display: none; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } </style> </head> <body> <div id="contentHolder"> <h1>Create a CSS Flipping Animation</h1> <div class="p">Read <a href="http://davidwalsh.name/css-flip" target="_new">Create a CSS Flipping Animation</a></div> <div id="promoNode"></div> <p>Mouse over the green box below to see it flip!</p> <h2>Just The Basics (Horizontal Flip)</h2> <!-- card --> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front">This is the front side</div> <div class="back">This is the back side</div> </div> </div> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_161.html">Styled Card (Basic Horizontal Flip) Flipping Animation</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library