Modular Flip Card

Developer
Brad Bodine
Size
4,009 Kb
Views
32,384
  1. Modular Flip Card Previews
  2. Modular Flip Card HTML Codes
  3. Modular Flip Card CSS Codes
  4. Modular Flip Card JS Codes

How do I make an modular flip card?

CSS Flip card effect. Modular html and css. Does not require css to flip on hover but does to flip on click. Pretty normal stuff. . What is a modular flip card? How do you make a modular flip card? This script and codes were developed by Brad Bodine on 11 August 2022, Thursday.

Modular Flip Card Previews
IQ Test

Modular Flip Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modular 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> <svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute">
<g id="rotate" data-iconmelon="80 icons pack:1bd3002a152cca79cc7ecc5eb8617375">
<g>
<path d="M29.033,16.326c-0.729,0-1.319,0.592-1.319,1.32c0,6.46-5.255,11.714-11.714,11.714S4.286,24.106,4.286,17.646 c0-6.114,4.71-11.142,10.69-11.662l-1.209,0.832c-0.602,0.413-0.752,1.234-0.339,1.836c0.255,0.371,0.667,0.571,1.088,0.571 c0.259,0,0.519-0.075,0.747-0.232l4.784-3.292c0.024-0.017,0.045-0.039,0.069-0.058c0.027-0.022,0.056-0.046,0.082-0.07 c0.057-0.053,0.107-0.11,0.152-0.172c0.011-0.014,0.025-0.024,0.035-0.039c0.004-0.005,0.006-0.012,0.01-0.018 c0.029-0.045,0.054-0.093,0.078-0.142c0.016-0.03,0.033-0.06,0.047-0.091c0.016-0.042,0.027-0.086,0.039-0.13 c0.012-0.039,0.025-0.077,0.033-0.117c0.009-0.04,0.01-0.081,0.014-0.123c0.004-0.043,0.011-0.085,0.011-0.128 s-0.007-0.086-0.011-0.128s-0.005-0.083-0.014-0.123c-0.008-0.04-0.021-0.078-0.033-0.118c-0.012-0.043-0.023-0.087-0.039-0.129 c-0.014-0.032-0.033-0.062-0.049-0.093c-0.023-0.049-0.047-0.096-0.076-0.14c-0.004-0.006-0.006-0.012-0.01-0.019 c-0.018-0.024-0.041-0.046-0.059-0.069c-0.031-0.039-0.061-0.078-0.097-0.113c-0.036-0.037-0.076-0.067-0.115-0.098 c-0.024-0.019-0.044-0.04-0.068-0.058l-4.784-3.293c-0.602-0.413-1.422-0.261-1.835,0.339c-0.413,0.601-0.263,1.423,0.339,1.836 l1.33,0.916C7.603,3.791,1.646,10.034,1.646,17.646C1.646,25.562,8.086,32,16,32s14.354-6.438,14.354-14.354 C30.354,16.918,29.763,16.326,29.033,16.326z"></path>
</g>
</g>
</svg>
<section class="wrapper">
<!-- Card Html --> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div>
<!-- end Card Html --> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </div> </div> <div class="card"> <div class="front"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Front of Card</h2> <p>This is the front of the card.</p> </section> </div> <div class="back"> <span> <svg viewBox="0 0 32 32"> <g filter=""> <use xlink:href="#rotate"></use> </g> </svg> </span> <section> <h2>Back of Card</h2> <p>This is the back of the card.</p> </section> </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>

Modular Flip Card - Script Codes CSS Codes

.card { height: 200px; width: 200px; position: relative; display: inline-block; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.card .front, .card .back { height: inherit; width: inherit; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.card .front span, .card .back span { /* Add the Flip button */ position: absolute; top: 5px; right: 5px; cursor: pointer; width: 20px; height: 20px;
}
.card .front span svg, .card .back span svg { fill: #2c3e50;
}
.card .front { background: #e74c3c; z-index: 2;
}
.card .back { background: #8e44ad; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.card.flip { /* CSS to make element flip on click */ -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.card section { /* Content Setup */ padding: 25px 10px; color: #fff;
}
/* Wrapper and card positioning. Not required for card */
.wrapper { position: relative; width: 647px; height: auto; margin: 0 auto; background: #2980b9;
}
.card { margin: 10px 0 10px 10px;
}
.card:nth-of-type(3) { margin-right: 10px;
}
* { font-family: lato;
}
html, body { background: #bdc3c7; color: #aaa;
}

Modular Flip Card - Script Codes JS Codes

// When .click element is clicked, add's .flip class to the element.
$(function() { $( ".card span" ).click(function() { $( this ).closest(".card").toggleClass( "flip" ); });
});
Modular Flip Card - Script Codes
Modular Flip Card - Script Codes
Home Page Home
Developer Brad Bodine
Username bbodine1
Uploaded August 11, 2022
Rating 3.5
Size 4,009 Kb
Views 32,384
Do you need developer help for Modular 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!

Brad Bodine (bbodine1) Script Codes
Name
CSS3 Checkbox Slider
CSS3 Monochrome Icon Set Linkable
CSS Arrows
Tile Slanted Corner
CSS3 Notepad
CSS Flip Animation
Foundation Full Width Rows
CSS3 Checkbox Styles
A Pen by Brad Bodine
Flat UI Login Form
Create amazing art & images 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!