CSS Flip Animation
How do I make an css flip animation?
Using a bit of CSS magic, you can create a flipping CSS animation with content on both the front and back. The animation even works on touch devices!. What is a css flip animation? How do you make a css flip animation? This script and codes were developed by Brad Bodine on 11 August 2022, Thursday.
CSS Flip Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Flip Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> <span class="name">David Walsh</span> </div> <div class="back"> <div class="back-logo"></div> <div class="back-title">@davidwalshblog</div> <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
CSS Flip Animation - Script Codes CSS Codes
html{ background: url(http://subtlepatterns.com/patterns/dark_wood.png);
}
.flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; perspective: 1000; position:absolute; top:25px; left:25px;
} .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }
.flip-container, .front, .back { width: 320px; height: 427px;
}
.flipper { -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; transition: 0.6s; transform-style: preserve-3d; position: relative;
}
.front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0;
}
.front { background: url(http://davidwalsh.name/demo/dwflip.jpg) 0 0 no-repeat; z-index: 2;
}
.back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); background: #f8f8f8;
}
.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; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg);
}
.back-logo { position: absolute; top: 40px; left: 90px; width: 160px; height: 117px; background: url(http://davidwalsh.name/demo/logo.png) 0 0 no-repeat;
}
.back-title { font-weight: bold; color: #00304a; position: absolute; top: 180px; left: 0; right: 0; text-align: center; text-shadow: 0.1em 0.1em 0.05em #acd7e5; font-family: Courier; font-size: 2em;
}
.back p { position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; padding: 0 20px; font-family: arial; line-height: 2em;
}
CSS Flip Animation - Script Codes JS Codes
/* Created by David Walsh http://davidwalsh.name/css-flip
*/
Developer | Brad Bodine |
Username | bbodine1 |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,525 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Card flip and zoom | 2,808 Kb |
CSS3 Checkbox Styles | 5,580 Kb |
CSS3 Checkbox Slider | 2,697 Kb |
Simple JSON | 2,247 Kb |
Foundation Full Width Rows | 2,548 Kb |
Login form using HTML5 and CSS3 | 3,652 Kb |
CSS3 Notepad | 2,564 Kb |
SASS Color Adjustments | 2,318 Kb |
A Pen by Brad Bodine | 4,747 Kb |
Figure Flip Card | 3,040 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Navcube | Wbarlow | 4,775 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!