Card flip

Developer
Pete Nawara
Size
4,481 Kb
Views
30,360
  1. Card flip Previews
  2. Card flip HTML Codes
  3. Card flip CSS Codes
  4. Card flip JS Codes

How do I make an card flip?

Was this your card?// Try a class of 'spade', 'club', 'diamond', or 'heart' for other aces // Future missions (feel free to fork and help). What is a card flip? How do you make a card flip? This script and codes were developed by Pete Nawara on 10 September 2022, Saturday.

Card flip Previews
IQ Test

Card flip - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card flip</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
body { background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/purty_wood.png);
}
.container { width: 500px; height: 500px; position: relative; perspective: 800px; margin: 20px auto;
}
#stack { background: url(https://colourlovers.com.s3.amazonaws.com/images/patterns/371/371152.png?1234201542); height: 325px; width: 250px; border-radius: 10px; position: absolute; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; padding: 10px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); transform: rotate(2deg);
}
#stack:before { top: -2px; left: -2px; transform: rotate(-1deg);
}
#stack:after { top: -5px; left: -6px; transform: rotate(-1.5deg);
}
#stack:before, #stack:after { content: ""; background: url(https://colourlovers.com.s3.amazonaws.com/images/patterns/371/371152.png?1234201542); height: 325px; width: 250px; display: block; border-radius: 10px; position: absolute; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
#stack #card { width: 250px; height: 325px; position: absolute; transform-style: preserve-3d; transition: transform 0.4s ease, margin 0.6s ease 0.2s; left: -3px; top: -3px;
}
#stack #card figure { display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; transition-delay: transform 1s;
}
#stack #card figure.front { background: #fafafa; transform: rotateZ(2deg) rotateY(180deg);
}
#stack #card figure.front:after { color: #555; font-size: 120px; font-family: arial; position: absolute; top: 80px;
}
#stack #card figure.front.spade:after { content: "♠"; left: 95px;
}
#stack #card figure.front.club:after { content: "♣"; left: 85px;
}
#stack #card figure.front.heart:after { content: "❤"; left: 70px; color: rgba(255, 90, 25, 0.8);
}
#stack #card figure.front.diamond:after { content: "♦"; left: 95px; color: rgba(255, 90, 25, 0.8);
}
#stack #card figure.back { background: url(https://colourlovers.com.s3.amazonaws.com/images/patterns/371/371152.png?1234201542);
}
#stack:hover #card { margin: -8px 0px 0px 300px; transform: rotateY(-180deg); transition: transform 0.6s ease 0.4s, margin 0.8s ease;
}
#stack:hover #card figure { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class='container'> <div id='stack'> <div id='card'> <figure class='front spade'></figure> <figure class='back'></figure> </div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Card flip - Script Codes CSS Codes

@charset "UTF-8";
body { background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/purty_wood.png);
}
.container { width: 500px; height: 500px; position: relative; perspective: 800px; margin: 20px auto;
}
#stack { background: url(https://colourlovers.com.s3.amazonaws.com/images/patterns/371/371152.png?1234201542); height: 325px; width: 250px; border-radius: 10px; position: absolute; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; padding: 10px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); transform: rotate(2deg);
}
#stack:before { top: -2px; left: -2px; transform: rotate(-1deg);
}
#stack:after { top: -5px; left: -6px; transform: rotate(-1.5deg);
}
#stack:before, #stack:after { content: ""; background: url(https://colourlovers.com.s3.amazonaws.com/images/patterns/371/371152.png?1234201542); height: 325px; width: 250px; display: block; border-radius: 10px; position: absolute; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
#stack #card { width: 250px; height: 325px; position: absolute; transform-style: preserve-3d; transition: transform 0.4s ease, margin 0.6s ease 0.2s; left: -3px; top: -3px;
}
#stack #card figure { display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; transition-delay: transform 1s;
}
#stack #card figure.front { background: #fafafa; transform: rotateZ(2deg) rotateY(180deg);
}
#stack #card figure.front:after { color: #555; font-size: 120px; font-family: arial; position: absolute; top: 80px;
}
#stack #card figure.front.spade:after { content: "♠"; left: 95px;
}
#stack #card figure.front.club:after { content: "♣"; left: 85px;
}
#stack #card figure.front.heart:after { content: "❤"; left: 70px; color: rgba(255, 90, 25, 0.8);
}
#stack #card figure.front.diamond:after { content: "♦"; left: 95px; color: rgba(255, 90, 25, 0.8);
}
#stack #card figure.back { background: url(https://colourlovers.com.s3.amazonaws.com/images/patterns/371/371152.png?1234201542);
}
#stack:hover #card { margin: -8px 0px 0px 300px; transform: rotateY(-180deg); transition: transform 0.6s ease 0.4s, margin 0.8s ease;
}
#stack:hover #card figure { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

Card flip - Script Codes JS Codes

// Try a class of 'spade', 'club', 'diamond', or 'heart' for other aces
// Future missions (feel free to fork and help)
// Create combo class for any card. IE figure.front.three.spade = 3 of spades
// Why? I don't know.
Card flip - Script Codes
Card flip - Script Codes
Home Page Home
Developer Pete Nawara
Username petebot
Uploaded September 10, 2022
Rating 3.5
Size 4,481 Kb
Views 30,360
Do you need developer help for 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!

Pete Nawara (petebot) Script Codes
Name
KITT
ScrollMagic playpen
Text Shadow
Dynamic Logo Creation
Audio Compare
History Viewer
Notifications
Ridonk Expando
Toggle Time
Toggle Time Three Options
Create amazing blog posts 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!