Flipped card use only CSS

Developer
Elad Shechter
Size
2,442 Kb
Views
48,576
  1. Flipped card use only CSS Previews
  2. Flipped card use only CSS HTML Codes
  3. Flipped card use only CSS CSS Codes
  4. Flipped card use only CSS JS Codes

How do I make an flipped card use only css?

What is a flipped card use only css? How do you make a flipped card use only css? This script and codes were developed by Elad Shechter on 13 July 2022, Wednesday.

Flipped card use only CSS Previews
IQ Test

Flipped card use only CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flipped card use only CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Click Card to Flip</p>
<ul class="flipping-cards"> <li> <input type="checkbox" id="item1"> <label for="item1"> <span class="wrapper"> <span class="image"></span> <span class="back"></span> </span> </label> </li> <li> <input type="checkbox" id="item2"> <label for="item2"> <span class="wrapper"> <span class="image"></span> <span class="back"></span> </span> </label> </li> <li> <input type="checkbox" id="item3"> <label for="item3"> <span class="wrapper"> <span class="image"></span> <span class="back"></span> </span> </label> </li> <li> <input type="checkbox" id="item4"> <label for="item4"> <span class="wrapper"> <span class="image"></span> <span class="back"></span> </span> </label> </li>
</ul> <footer> done by Elad Shechter - <a href="https://coderwall.com/elad2412">https://coderwall.com/elad2412</a> </footer> <script src="js/index.js"></script>
</body>
</html>

Flipped card use only CSS - Script Codes CSS Codes

.flipping-cards li{position:relative; float:left; margin-right:10px;}
.flipping-cards label{ display:block; width:200px; height:250px; cursor:pointer;}
.flipping-cards .wrapper{ display:block; width:200px; height:250px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 2.50s;
-moz-transition: all .50s;
transition: all .50s;
}
.flipping-cards .wrapper span{ display:block; width:200px; height:250px; position:absolute; top:0; left:0;
}
.flipping-cards label .back{ border-radius:10px; -webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
background-color: #6d695c;
}
.flipping-cards label .image{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
.flipping-cards input[type="checkbox"]:checked + label .wrapper{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);
}
label[for="item1"] .image{background-image:url(http://farm6.staticflickr.com/5339/8879221754_51e07afc5e_o.png);}
label[for="item2"] .image{background-image:url(http://farm8.staticflickr.com/7398/8878601839_e5a56dc65f_o.png);}
label[for="item3"] .image{background-image:url(http://farm6.staticflickr.com/5461/8879221878_b22fdf9ff8_o.png);}
label[for="item4"] .image{background-image:url(http://farm8.staticflickr.com/7458/8878601681_b8c0499874_o.png);}
input[type="checkbox"]{display:none;}
ul,li{list-style:none;padding:0;margin:0;}
p{font-weight:bold;}
footer{clear:both; padding-top:20px;font-weight:bold;}
footer a{color:blue;}

Flipped card use only CSS - Script Codes JS Codes

/**NO-JAVASCRIPT**/
Flipped card use only CSS - Script Codes
Flipped card use only CSS - Script Codes
Home Page Home
Developer Elad Shechter
Username elad2412
Uploaded July 13, 2022
Rating 3
Size 2,442 Kb
Views 48,576
Do you need developer help for Flipped card use only CSS?

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!

Elad Shechter (elad2412) Script Codes
Name
Css - ellipsis
CSS Target Event
PURE CSS GAME - NO JS
Dynamic element size via CSS position manipulation
A Pen by Elad Shechter
Flipping Card - Stage one
Making seperator - select all elements except from the first one
Px to rem
Responsive Background Images
CSS Smart Gradients
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!