Card Flip
How do I make an card flip?
What is a card flip? How do you make a card flip? This script and codes were developed by Shay Howe on 12 July 2022, Tuesday.
Card Flip - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card Flip</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card-container"> <div class="card"> <div class="side"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div> <div class="side back">Jimmy Eat World</div> </div>
</div>
</body>
</html>
Card Flip - Script Codes CSS Codes
body { font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; margin: 12px 0;
}
.card-container { cursor: pointer; height: 150px; -webkit-perspective: 600; perspective: 600; position: relative; width: 150px;
}
.card { height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; width: 100%;
}
.card:hover { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.card .side { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 6px; height: 100%; position: absolute; overflow: hidden; width: 100%;
}
.card .back { background: #eaeaed; color: #0087cc; line-height: 150px; text-align: center; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
Developer | Shay Howe |
Username | shayhowe |
Uploaded | July 12, 2022 |
Rating | 4 |
Size | 1,850 Kb |
Views | 50,600 |
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 |
Login Form | 1,951 Kb |
Adding Video | 1,490 Kb |
Containing Floats | 1,633 Kb |
Fixed Grid | 1,688 Kb |
Sibling Selectors | 1,888 Kb |
Layout with Contained Floats | 1,822 Kb |
Flexible Grid | 1,815 Kb |
Pseudo-classes Example | 2,034 Kb |
Three-column Layout with Floats | 1,678 Kb |
Transition | 1,632 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 |
Improve | Gavra | 1,652 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Speech bubbles | Something | 1,547 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Price table | Serluk | 5,928 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
RPG Style Text Dialogue | Odylic | 2,635 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!