CSS Animation - Card Flip

Developer
Jason Chan
Size
1,866 Kb
Views
26,312
  1. CSS Animation - Card Flip Previews
  2. CSS Animation - Card Flip HTML Codes
  3. CSS Animation - Card Flip CSS Codes

How do I make an css animation - card flip?

This is CSS animation of card flip.. What is a css animation - card flip? How do you make a css animation - card flip? This script and codes were developed by Jason Chan on 13 September 2022, Tuesday.

CSS Animation - Card Flip Previews
IQ Test

CSS Animation - Card Flip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Animation - Card Flip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">	<div class="side-a"></div>	<div class="side-b"></div>	</div>
</body>
</html>

CSS Animation - Card Flip - Script Codes CSS Codes

body {	padding-top: 50px;	background: #F7F7F7;
}
.wrap {	position: relative;	margin: 0 auto;	width: 250px;	height: 350px;	cursor: pointer;
}
.wrap div {	width: 100%;	height: 100%;	border-radius: 10px;	background-position: 50% 50%;	background-size: 250px;	background-repeat: no-repeat;	box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);	color: #FFF;	text-align: center;	text-shadow: 0 1px rgba(0,0,0,.3);	font: bold 3em sans-serif;	line-height: 350px;
}
.side-a {	background: #498FBC url('http://media-hearth.cursecdn.com/attachments/9/192/feb-2015.png');
}
.side-b {	background: #33363B url('http://media-hearth.cursecdn.com/avatars/149/109/12182.png');
}
body {	-webkit-perspective: 800px;
}
.wrap {	transition: -webkit-transform 1s ease-in;	-webkit-transform-style: preserve-3d;
}
.wrap div {	position: absolute;	-webkit-backface-visibility: hidden;
}
.side-a {	z-index: 100;
}
.side-b {	-webkit-transform: rotateY(-180deg);
}
.wrap:hover {	-webkit-transform: rotateY(180deg);
}
CSS Animation - Card Flip - Script Codes
CSS Animation - Card Flip - Script Codes
Home Page Home
Developer Jason Chan
Username jasonchan
Uploaded September 13, 2022
Rating 3
Size 1,866 Kb
Views 26,312
Do you need developer help for CSS Animation - Card Flip?

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!

Jason Chan (jasonchan) Script Codes
Name
Wiki search
Wikipedia api youtube tutorial revisted
Step Bar
Bootstrap 4 Layout
Score Keeper
Simple Weather App
Kitchen Timer
Count Down Clock
Owl slider tutorial
Tic tac toe
Create amazing video scripts 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!