Flip Card - Bad Rotation

Developer
Andy McFee
Size
4,440 Kb
Views
40,480
  1. Flip Card - Bad Rotation Previews
  2. Flip Card - Bad Rotation HTML Codes
  3. Flip Card - Bad Rotation CSS Codes

How do I make an flip card - bad rotation?

This is a fork of my Flip Card pen to show an example of using incorrect rotate values. . What is a flip card - bad rotation? How do you make a flip card - bad rotation? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.

Flip Card - Bad Rotation Previews
IQ Test

Flip Card - Bad Rotation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flip Card - Bad Rotation</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> <div class="viewport"> <div class="flip-card"> <div class="card-front"> Bad </div> <div class="card-back bad-rotation"> 180° to 0° </div> </div> <div class="flip-card"> <div class="card-front"> Good </div> <div class="card-back"> -180° to 0° </div> </div> <div class="flip-card fast-flip"> <div class="card-front"> Bad </div> <div class="card-back bad-rotation"> 180° to 0° </div> </div> <div class="flip-card fast-flip"> <div class="card-front"> Good </div> <div class="card-back"> -180° to 0° </div> </div>
</div>
</body>
</html>

Flip Card - Bad Rotation - Script Codes CSS Codes

/***
* CSS3 FLIP CARDS
* Markup for an element that a user can hover to reveal content on the back, like a card
* Browser Support: Safari, Firefox, Chrome, IE8+, and Touch Devices; (IE9 and below will not have any flip effect but will just change on hover
***/
.flip-card { display: block; position: relative; z-index: 1000; width: 200px; height: 100px;
}
.flip-card .card-front,
.flip-card .card-back { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: -moz-transform 2000ms; -o-transition: -o-transform 2000ms; -webkit-transition: -webkit-transform 2000ms; transition: transform 2000ms; display: block; height: 100%; position: absolute; width: 100%;
}
.flip-card .card-front { -moz-transform: perspective(200) rotateY(0); -webkit-transform: perspective(200) rotateY(0); transform: perspective(200) rotateY(0); z-index: 900;
}
.flip-card .card-back { -moz-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); z-index: 800;
}
.flip-card .card-back.bad-rotation { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.flip-card:hover .card-front { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -moz-transform: perspective(200) rotateY(180deg); -webkit-transform: perspective(200) rotateY(180deg); transform: perspective(200) rotateY(180deg);
}
.flip-card:hover .card-back { z-index: 950; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -moz-transform: perspective(200) rotateY(0deg); -webkit-transform: perspective(200) rotateY(0deg); transform: perspective(200) rotateY(0deg);
}
/*** Just for show... ***/
.flip-card { text-shadow: 1px 1px 0 rgba(14, 85, 143, 0.8); color: #fff; cursor: pointer; float: left; font-weight: bold; margin: 10px; text-align: center; text-transform: uppercase; min-width: 100px; max-width: 400px;
}
.flip-card .card-front,
.flip-card .card-back { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8); -webkit-box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8); box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #051e32; padding: 40px 0;
}
.flip-card .card-front { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #499bea; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF499BEA', endColorstr='#FF207CE5'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ5OWJlYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwN2NlNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #499bea), color-stop(100%, #207ce5)); background-image: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); background-image: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%); background-image: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
}
.flip-card .card-back { -moz-box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset; -webkit-box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset; box-shadow: 0 0 20px rgba(19, 113, 189, 0.8) inset; background-color: #478ce0; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF478CE0', endColorstr='#FF0263DB'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ3OGNlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExNjhkYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAyNjNkYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #478ce0), color-stop(100%, #1168db), color-stop(100%, #0263db)); background-image: -moz-linear-gradient(top, #478ce0 0%, #1168db 100%, #0263db 100%); background-image: -webkit-linear-gradient(top, #478ce0 0%, #1168db 100%, #0263db 100%); background-image: linear-gradient(to bottom, #478ce0 0%, #1168db 100%, #0263db 100%);
}
body { background-color: #e6f2f7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFE6F2F7', endColorstr='#FFA0D8EF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZjJmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EwZDhlZiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-radial-gradient(center, circle cover, #e6f2f7 0%, #a0d8ef 100%); background-image: -webkit-radial-gradient(center, circle cover, #e6f2f7 0%, #a0d8ef 100%); background-image: radial-gradient(circle cover at center, #e6f2f7 0%, #a0d8ef 100%);
}
.fast-flip .card-front,
.fast-flip .card-back { -moz-transition-duration: 750ms; -o-transition-duration: 750ms; -webkit-transition-duration: 750ms; transition-duration: 750ms;
}
.viewport { margin: 10px auto 0; width: 440px;
}
Flip Card - Bad Rotation - Script Codes
Flip Card - Bad Rotation - Script Codes
Home Page Home
Developer Andy McFee
Username andymcfee
Uploaded August 09, 2022
Rating 3
Size 4,440 Kb
Views 40,480
Do you need developer help for Flip Card - Bad Rotation?

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!

Andy McFee (andymcfee) Script Codes
Name
Page Transitions - Vertical Sliding
Whatsizeisthisscreen.com
Flip Card
Pure CSS3 Toggle Switch
Responsive Boxes without Images
Flexbox vertcially centered nav text
Flexbox Header Demo
CSS3 Border Image
Responsive Boxes with CSS3 Columns
Responsive Boxes with Images
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!