Flip Card
How do I make an flip card?
My goal was to create re-useable card-like elements that flip on hover (or tap!)I've built markup for a flippable card that you can use to hold any content you want on the front or the back of the card. Simply set the size of the containing .flip-card element and put whatever you want into .front and .back and style accordingly.. What is a flip card? How do you make a flip card? This script and codes were developed by Andy McFee on 08 August 2022, Monday.
Flip Card Previews
Flip Card - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flip Card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Wrote a blog post about how it all works:
http://andymcfee.com/2012/08/24/css3-flip-cards/
-->
<div class="viewport"> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div> <div class="flip-card"> <div class="card-front"> Front! </div> <div class="card-back"> Back! </div> </div>
</div>
</body>
</html>Flip Card - Script Codes CSS Codes
/***
* CSS3 FLIP CARDS
* Markup for an element that a user can hover to reveal content on the back, like a card
* Browser Support: Safari, Firefox, Chrome, IE8+, and Touch Devices; (IE9 and below will not have any flip effect but will just change on hover)
***/
.flip-card { display: block; position: relative; z-index: 1000; width: 100px; height: 100px;
}
.flip-card .card-front,
.flip-card .card-back { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: -moz-transform 500ms; -o-transition: -o-transform 500ms; -webkit-transition: -webkit-transform 500ms; transition: transform 500ms; display: block; height: 100%; position: absolute; width: 100%;
}
.flip-card .card-front { -moz-transform: perspective(300) rotateY(0); -webkit-transform: perspective(300) rotateY(0); transform: perspective(300) rotateY(0); z-index: 900;
}
.flip-card .card-back { -moz-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); z-index: 800;
}
.flip-card:hover .card-front { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -moz-transform: perspective(300) rotateY(180deg); -webkit-transform: perspective(300) rotateY(180deg); transform: perspective(300) rotateY(180deg);
}
.flip-card:hover .card-back { z-index: 950; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -moz-transform: perspective(300) rotateY(0deg); -webkit-transform: perspective(300) rotateY(0deg); transform: perspective(300) rotateY(0deg);
}
/*** Just for show... ***/
.flip-card { text-shadow: 1px 1px 0 rgba(14, 85, 143, 0.8); color: #fff; cursor: pointer; float: left; font-weight: bold; margin: 10px; text-align: center; text-transform: uppercase; min-width: 100px; max-width: 400px;
}
.flip-card .card-front,
.flip-card .card-back { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8); -webkit-box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8); box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #051e32; padding: 40px 0;
}
.flip-card .card-front { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #499bea; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF499BEA', endColorstr='#FF207CE5'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ5OWJlYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwN2NlNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #499bea), color-stop(100%, #207ce5)); background-image: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); background-image: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%); background-image: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
}
.flip-card .card-back { -moz-box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset; -webkit-box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset; box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset; background-color: #478ce0; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF478CE0', endColorstr='#FF0263DB'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ3OGNlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExNjhkYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAyNjNkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #478ce0), color-stop(100%, #1168db), color-stop(100%, #0263db)); background-image: -moz-linear-gradient(top, #478ce0 0%, #1168db 100%, #0263db 100%); background-image: -webkit-linear-gradient(top, #478ce0 0%, #1168db 100%, #0263db 100%); background-image: linear-gradient(to bottom, #478ce0 0%, #1168db 100%, #0263db 100%);
}
body { background-color: #e6f2f7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFE6F2F7', endColorstr='#FFA0D8EF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZjJmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EwZDhlZiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(center, circle cover, #e6f2f7 0%, #a0d8ef 100%); background-image: -webkit-radial-gradient(center, circle cover, #e6f2f7 0%, #a0d8ef 100%); background-image: radial-gradient(circle cover at center, #e6f2f7 0%, #a0d8ef 100%);
}
.viewport { margin: 10px auto 0; width: 500px;
}
| Developer | Andy McFee |
| Username | andymcfee |
| Uploaded | August 08, 2022 |
| Rating | 4.5 |
| Size | 4,615 Kb |
| Views | 40,480 |
Do you need developer help for Flip Card?
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!
Andy McFee (andymcfee) Script Codes
| Name | Size |
| Prototyping Grid | 3,608 Kb |
| Responsive Boxes with CSS3 Columns | 4,168 Kb |
| CSS Loading Spinners | 3,969 Kb |
| Whatsizeisthisscreen.com | 4,413 Kb |
| Page Transitions - Vertical Sliding | 4,943 Kb |
| Responsive Boxes with Images | 3,915 Kb |
| Responsive Boxes without Images | 4,120 Kb |
| BEM Flexbox Nav build for a workshop | 3,126 Kb |
| A Pen by Andy McFee | 2,034 Kb |
| Flexbox Header Demo | 2,618 Kb |
Create amazing marketing copy with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Starfield old school style | Bolloxim | 5,214 Kb |
| SVG Basics | HipsterBrown | 1,852 Kb |
| Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
| Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
| Hoi hoi | JohnTheCat | 7,248 Kb |
| Funny menu | AxeLVaisper | 4,671 Kb |
| LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
| React Recipe Box | Krokodill | 5,347 Kb |
| Hovers with popups | Zacharyolson | 2,380 Kb |
| A vuejs widget | Chrgl86 | 2,869 Kb |
Do you want hide your ip address?
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!