Card Flip
How do I make an card flip?
A card that will flip when you hover over it. It still needs some work, but its late and I'm tired.. What is a card flip? How do you make a card flip? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.
Card Flip - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card Flip</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wall"><div id="table"></div></div>
<div id="image"> <div id="wrapper"> <div id="back"> <div class="inner"> <div id="emblem"> <h1>A<br>Serious<br>Card<br>Game</h1> </div> </div> </div> <div id="front"> <div class="inner"> <div id="name">Squinting Ninja</div> <div id="window"> <div id="sky"></div> <div id="ground"></div> <div id="head"> <div id="wrap"></div> <div id="mask"> <div id="right-eye" class="eye"> <div class="lid"></div> <div class="pupil"></div> <div class="lid lid-bottom"></div> </div> <div id="left-eye" class="eye"> <div class="lid"></div> <div class="pupil"></div> <div class="lid lid-bottom"></div> </div> </div> </div> </div> <div id="type"> <span class="num">3</span> <span class="sand">|</span> <span class="sand">|</span> </div> <div id="info"> <p>Merely squinting at your enemy makes them unable to attack you. Every time you blink they lose 1 point of health due to pure terror.</p> <p class="quote">Some cool quote by a fabled wizard <br><spanc class="name">- Wizard's Name</span></p> </div> <div id="stats">9/8</div> </div> </div> </div> <div id="shadow-wrapper"> <div id="shadow"></div> </div>
</div> <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
@-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1); } 100% { -moz-transform: scale(0.85); transform: scale(0.85); }
}
@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.85); transform: scale(0.85); }
}
@keyframes pulse { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 100% { -moz-transform: scale(0.85); -ms-transform: scale(0.85); -webkit-transform: scale(0.85); transform: scale(0.85); }
}
@-moz-keyframes bounce { 0% { margin-top: 0; } 100% { margin-top: -30px; }
}
@-webkit-keyframes bounce { 0% { margin-top: 0; } 100% { margin-top: -30px; }
}
@keyframes bounce { 0% { margin-top: 0; } 100% { margin-top: -30px; }
}
@-moz-keyframes blink { 0% { margin-top: 10px; } 3% { margin-top: 0; } 6% { margin-top: 10px; }
}
@-webkit-keyframes blink { 0% { margin-top: 10px; } 3% { margin-top: 0; } 6% { margin-top: 10px; }
}
@keyframes blink { 0% { margin-top: 10px; } 3% { margin-top: 0; } 6% { margin-top: 10px; }
}
@-moz-keyframes dash { 0% { left: 400px; } 100% { left: 100px; }
}
@-webkit-keyframes dash { 0% { left: 400px; } 100% { left: 100px; }
}
@keyframes dash { 0% { left: 400px; } 100% { left: 100px; }
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html,
body { height: 100%; min-height: 100%; margin: 0; overflow: hidden;
}
p { font-size: 11pt; margin: 0;
}
h1 { color: #152; font-size: 300%; margin: 40 0 0; line-height: 1.5; padding: 0 40px; text-align: center; width: 238px; text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
#wall { background-color: #ffd; height: inherit; position: absolute; width: 100%; -moz-perspective: 400px; -webkit-perspective: 400px; perspective: 400px;
}
#table { background: url("http://subtlepatterns.com/patterns/retina_wood.png") repeat scroll 0 0 transparent; height: 50%; position: absolute; top: 50%; width: inherit; -moz-transform: rotateX(45deg); -ms-transform: rotateX(45deg); -webkit-transform: rotateX(45deg); transform: rotateX(45deg);
}
.quote { font-size: 9pt; font-style: italic; padding-top: 20px;
}
.name { float: right;
}
#image { left: calc(50% - 150px); height: inherit; position: relative; width: 300px; perspective: 2500;
}
#image:hover #wrapper { transform: rotateY(180deg);
}
#wrapper { left: calc(50% - 150px); height: 450px; position: absolute; top: calc(50% - 225px); transform-style: preserve-3d; width: 300px; -moz-animation: bounce 2s ease-in-out alternate infinite; -webkit-animation: bounce 2s ease-in-out alternate infinite; animation: bounce 2s ease-in-out alternate infinite; -moz-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear;
}
#front { -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #fff; border: 1px solid #aaa; height: 100%; overflow: hidden; position: absolute; width: 100%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
#back { -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #000; border: 1px solid #aaa; display: block; height: 100%; position: absolute; width: 100%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
#emblem { background-color: #afa; height: 86%; left: 10%; position: absolute; top: 7%; width: 80%; z-index: 10; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 0 1px 1px #000, 0 0 5px 1px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 1px 1px #000, 0 0 5px 1px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 1px 1px #000, 0 0 5px 1px rgba(255, 255, 255, 0.25);
}
.inner { background-color: #152; border: 10px solid #ddd; height: 100%; overflow: hidden; width: 100%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
}
#window { background-color: #fff; height: 40%; margin: 1% auto 0; overflow: hidden; position: relative; width: 90%;
}
#name { color: #fff; position: relative; padding-left: 15px; margin-top: 2px;
}
#type { color: #000; height: 4%; margin: 1% auto 0; width: 90%;
}
.num { color: #fff;
}
.sand { background-color: #afa; float: right; height: 18px; margin-left: 5px; text-align: center; width: 18px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
#info { background-color: #afa; border-bottom: 4px solid #1a8033; border-left: 4px solid #2bd555; border-right: 4px solid #1e953c; border-top: 4px solid #22aa44; height: 43%; line-height: 1.5; margin: 2% auto 0; padding: 10px; text-align: justify; width: 90%;
}
#stats { background-color: #afa; float: right; height: 18px; margin: 3px 13px 0 0; padding: 0 0; text-align: center; width: 30px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
#shadow-wrapper { height: 50px; left: calc(50% - 110px); position: absolute; top: calc(50% + 275px); width: 220px; -moz-transform: rotateX(70deg); -ms-transform: rotateX(70deg); -webkit-transform: rotateX(70deg); transform: rotateX(70deg);
}
#shadow { background-color: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; -moz-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5); box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5); -moz-animation: pulse 2s ease-in-out alternate infinite; -webkit-animation: pulse 2s ease-in-out alternate infinite; animation: pulse 2s ease-in-out alternate infinite;
}
#sky { background-color: #1b5784; height: 220px; margin-top: -10px; position: absolute; width: 260px; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF104060', endColorstr='#FF072D59'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEwNDA2MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDA1NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #104060), color-stop(100%, #000055)); background-image: -moz-linear-gradient(top, #104060 0%, #000055 100%); background-image: -webkit-linear-gradient(top, #104060 0%, #000055 100%); background-image: linear-gradient(to bottom, #104060 0%, #000055 100%);
}
#head { background-color: #000; height: 200px; left: 100px; overflow: hidden; position: absolute; width: 200px; -moz-animation: dash 1s linear; -webkit-animation: dash 1s linear; animation: dash 1s linear; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform: rotateZ(-20deg); -ms-transform: rotateZ(-20deg); -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg);
}
#mask { background-color: #eb5; height: 35px; margin-top: 5px; position: relative; width: 100%;
}
#wrap { background-color: #f00; height: 20px; position: relative; margin-top: 30%; width: 100%;
}
.eye { background-color: #fff; display: inline-block; height: 35px; margin-left: 20px; overflow: hidden; position: relative; width: 35px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.lid { background-color: #eb5; border: 1px solid #630; height: 15px; position: relative; width: 40px; z-index: 10;
}
.lid-bottom { height: 30px; margin-top: 10px; -moz-animation: blink 6s linear 1s infinite; -webkit-animation: blink 6s linear 1s infinite; animation: blink 6s linear 1s infinite;
}
.pupil { background-color: #962; display: inline-block; height: 20px; left: calc(50% - 10px); position: absolute; top: calc(50% - 10px); width: 20px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
Card Flip - Script Codes JS Codes
/** * Created by Bryan Jones. * * Hover over the card to see it flip. */
Developer | Bryan Jones |
Username | bartuc |
Uploaded | July 13, 2022 |
Rating | 3.5 |
Size | 5,712 Kb |
Views | 52,624 |
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 |
Planet Rotation | 2,953 Kb |
Subscribe | 2,802 Kb |
Solar System | 3,454 Kb |
Screens | 5,328 Kb |
Atom | 3,816 Kb |
Shine Effect | 2,944 Kb |
Particles | 4,160 Kb |
Gravity | 4,905 Kb |
Vermhole | 6,053 Kb |
Planet Awesome | 3,554 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 |
Headroom.js demo | WickyNilliams | 3,982 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Cake | Kennyname | 7,220 Kb |
Clock with full screen background | Owebboy | 2,415 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!