We Keep Coding

I want to create a vote system with jQuery but not working

I am trying to create a function with jQuery but I can't. When you press a button then an arrow will move to 36 degrees. I have 5 buttons and the circle is 180 degrees.
My code is working in one way but it's not in reverse, which means when you press button 1 to 5 it's working but when I try to click randomly then it is not working.
Here is what i am trying to build
$(document).ready(function() {
$("#ang36").click(function() {
$("#silder_image").removeClass("animate1");
$("#silder_image").addClass("animate1");
});
$("#ang72").click(function() {
$("#silder_image").removeClass("animate2");
$("#silder_image").addClass("animate2");
});
$("#ang108").click(function() {
$("#silder_image").removeClass("animate3");
$("#silder_image").addClass("animate3");
});
$("#ang144").click(function() {
$("#silder_image").removeClass("animate4");
$("#silder_image").addClass("animate4");
});
$("#ang180").click(function() {
$("#silder_image").removeClass("animate5");
$("#silder_image").addClass("animate5");
});
});
.slider_area {
width: 800px;
margin: 0 auto;
position: relative;
margin-top: 400px;
}
.silder_image {
width: 100px;
height: 100px;
}
.animate1 {
transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate1 img,
.animate2 img,
.animate3 img,
.animate4 img,
.animate5 img {
transform: rotate(-90deg);
}
.animate2 {
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate3 {
transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate4 {
transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate5 {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform-origin: center center;
transition-duration: 5s;
}
.triggrs {
position: relative;
width: 400px;
bottom: -171px;
left: 0;
}
<div class="slider_area">
<div id="silder_image">
<img src="Slider Vote.png" alt="">
</div>
<div class="triggrs">
<button id="ang36">button1</button>
<button id="ang72">button2</button>
<button id="ang108">button3</button>
<button id="ang144">button4</button>
<button id="ang180">button5</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I created another approach which could also help you further (maybe).
let needle = document.querySelector('#needle ');
let btns = document.querySelectorAll('button')
btns.forEach( btn=>{ btn.addEventListener('click', function() {
let level = this.dataset.deg;
needle.style.transform = "rotate("+Number(level)+"deg)"});
})
#panel {
height: 50px;
overflow: hidden;
}
.circle{
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid grey;
position: relative;
display: flex;
justify-content: center;
transform: rotate(-90deg);
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%);
}
#needle {
width: 6px;
height: 50px;
background: #4361ff;
transform-origin: bottom;
transition: transform .75s cubic-bezier(.31,-0.52,.84,1.55);
transform: rotate(30deg);
box-sizing: border-box;
margin-left: -3px;
}
.buttons {
margin-top: 2rem;
}
<div id="panel">
<div class="circle">
<div id="needle"></div>
</div>
</div>
<div class="buttons">
<button data-deg="30">1</button>
<button data-deg="60">2</button>
<button data-deg="90">3</button>
<button data-deg="120">4</button>
<button data-deg="150">5</button>
</div>

How can I create a single page vertical page turn effect

I want to create a calendar like set of 12 images that appear to flip up when clicked. I know about turn.js but I don't know enough javascript to start from scratch. I do have a programming background and am willing to learn but don't know where to start.
http://pageflip-books.com/index.php#ppp/page/1
is something like what I'm looking for but I want to show the top pages not the bottom ones.
Most of the examples I have found are for books/magazines with two pages side by side.
Thanks for any pointers.

I would look into CSS animations if I were you. An example can be found here: https://codepen.io/ryrocks/pen/zovXWy
HTML
<!-- https://cssdeck.com/labs/pure-css3-page-flip-effect -->
<div id="all">
<div id="page-flip">
<div id="r1">
<div id="p1">
<div>
<div></div>
</div>
</div>
</div>
<div id="p2">
<div></div>
</div>
<div id="r3">
<div id="p3">
<div>
<div></div>
</div>
</div>
</div>
<div class="s">
<div id="s3">
<div id="sp3"></div>
</div>
</div>
<div class="s" id="s4">
<div id="s2">
<div id="sp2"></div>
</div>
</div>
<a id="coke" href="#" title="Pure CSS Coke Can"></a>
<a id="meninas" href="#" title="CSS 3D Meninas"></a>
</div>
</div>
CSS
body {
padding: 0;
margin: 0;
}
#all {
width: 680px;
margin-left: auto;
margin-right: auto;
}
#page-flip {
background-image: url(https://cssdeck.com/uploads/media/items/6/6h4pDpK.jpg);
position: absolute;
padding: 40px 40px 40px 340px;
width: 300px;
height: 400px;
overflow: hidden;
}
#r1 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
}
#p1 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}
#p1 > div > div {
width: 10px;
height: 388px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
}
#p2 > div {
width: 285px;
height: 388px;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
position: absolute;
z-index: 1;
background-image: url(https://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}
#r3 {
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 2;
}
#s3 {
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 1;
}
#page-flip:hover #s3 {
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
width: 25px;
height: 1000px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
overflow: hidden;
}
#page-flip:hover #sp3 { width: 11px }
.s {
width: 285px;
height: 388px;
position: absolute;
overflow: hidden;
z-index: 3;
}
#s2 {
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
}
#sp2 {
width: 15px;
height: 1000px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
overflow: hidden;
}
#s4 {
opacity: 1;
-webkit-transition-duration: 0.5s;
}
#page-flip:hover #s4 { opacity: 0 }
#page-flip:hover #s2 {
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
overflow: hidden;
}
#p3 > div > div {
width: 9px;
height: 500px;
float: right;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
}
#page-flip:hover #r1 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
}
a {
display: block;
position: absolute;
margin: -20000px 0 0 0;
padding: 1px;
z-index: 3;
-webkit-transition-property: margin;
-webkit-transition-duration: 0.01s;
}
#coke {
width: 253px;
height: 158px;
}
a:hover {
padding: 0;
border: 1px dotted #92C7C1;
}
#page-flip:hover #coke {
-webkit-transition-delay: .8s;
margin: 33px 0 0 14px;
}
#meninas {
width: 253px;
height: 167px;
}
#page-flip:hover #meninas {
-webkit-transition-delay: .8s;
margin: 203px 0 0 14px;
}
In this example hover triggers the page flip, but you can modify that to be triggered by a Javascript click event and to show the page that you prefer when the event occurs.

inserting a text box at top of the page

I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>

Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.

Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});

You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>

CSS 3d Transform in IE

I'm trying to create a vertical flip effect, but can't get it to work at all in any version of IE.
I tried adding the preserve 3d fix to the child elements but still nothing was working so I'm completely lost now.
Here is a jsfiddle: https://jsfiddle.net/y3x706o3/
As you can see, it works properly in chrome etc, but in IE there is no flip and the back colour from .creation:after shows through on top of the images.
Is there any way I can get this to work in IE? I'm certain that it will not be the same as chrome, but is there a way to have the images move to revel the text underneath at all? I'm willing to look at javascript alternatives too.
HTML
<div class='flip-container left-section'>
<div class='creation'>
<div class='front'>
<div class='cont'>
<img src="http://lorempixel.com/246/300/" alt="blah blah">
</div>
</div>
</div>
</div><!--
--><div class='flip-container right-section'>
<div class='creation'>
<div class='front'>
<div class='cont'>
<img src="http://lorempixel.com/574/300/" alt="blah blah">
</div>
</div>
</div>
</div>
<div class="back">
<div class="left-section">
<h3>Blah</h3>
<p>hjsad sahjkd kjwdakjkjw dakj wdakjh dwa</p>
</div>
<div class="right-section">
<h3>Foobar</h3>
<p>jkhwejkadwjh d wa jdwwd jkwdj wd ajk wdkjdewkjljdkwejwd jdwajdwakj ljlk dwa</p>
</div>
</div>
<div class="clearfix"></div>
</div>
CSS
.flip-container {
-webkit-perspective:1200;
-moz-perspective:1200;
perspective:1200;
display: inline-block;
z-index: 400;
position: relative;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
transition:all 0.6s;
}
.left-section {
width: 30%;
float: left;
}
.right-section {
width: 70%;
float: left;
}
.flip-container:hover {
z-index: 998;
}
.flip-container:hover .creation {
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
}
.creation {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
width:100%;
float:left;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
transition:all 0.6s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.front {
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
backface-visibility:hidden;
}
.creation:after {
content: '';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
background-color: #808080;
-webkit-transform: rotateY( 180deg );
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.creation p {
color:#666;
display:block;
width:auto;
text-align:center;
line-height:184px;
margin:0 30px;
font-size:20px;
text-transform:uppercase;
text-shadow:1px 1px 1px #999;
font-family:sans-serif;
}
.creation p span {
vertical-align:middle;
display:inline-block;
line-height:1.4;
}
.cont {
width:100%;
}
.cont img {
width: 100%;
display: block;
}
.flipbook-cont {
position: relative;
width: 100%;
max-width: 820px;
margin: 0 auto;
}
.flipbook-cont.fold {
margin-top: 25px;
}
.flipbook-cont.flip {
margin: 50px auto;
-webkit-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
-moz-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
}
.flipbook-cont.fold img {
display: block;
width: 100%;
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 25px 0;
background-color: white;
}
.back .left-section {
padding: 0 40px;
}
.back .right-section {
padding: 0 40px;
}
#media all and (max-width: 698px) {
.flipbook-cont {
display: none;
}
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* {
box-sizing: border-box;
}

Try add in your css styles properties with -ms- prefix. For example:
.flip-container {
-ms-perspective:1200;
-ms-transition:all 0.6s;
}
.flip-container:hover .creation {
-ms-transform:rotateX(90deg);
}
.creation {
-ms-transform-style:preserve-3d;
-ms-transform-origin: 50% 0;
-ms-transition:all 0.6s;
}
.front {
-ms-backface-visibility:hidden;
}
.creation:after {
-ms-transform: rotateY( 180deg );
-ms-transform-style: preserve-3d;
-ms-backface-visibility: hidden;
}
You can check on caniuse.com to be sure what works in which browser.
Hope this help.

CSS3 Card Flip and Expand

I'm trying to have a collection of cards/divs within a container. When a card/div is clicked, it should flip horizontally and expand to take up the entire space within the container (basically changing the size of the card/div to 100% x 100% when clicked). I'm unsure if this is possible or not, as all of the examples that I've seen out there typically involve the card/div remaining the same size.
Here's the fiddle I tried working with, but I can't get the basic flipping functionality: https://jsfiddle.net/4dazznb5/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
.cards {
width: 100%;
height: 100%;
background: gray;
padding: 10px;
box-sizing: border-box;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.cards .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: white;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.card {
width: 100%;
background: lightgray;
padding: 6px;
margin: 10px 0;
box-sizing: border-box;
cursor: pointer;
position: relative;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:nth-of-type(1) {
margin-top: 0;
}
.card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card">
<div class="face front">Card 1 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 2 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 3 Front</div>
<div class="face back">Card 3 Back</div>
</div>
</div>
</div>

Since Tambo's backfaces were better (allowing html content), I made this mix with our answers (tested with success on Mozilla and Chrome):
$('.card').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".face" ).addClass( 'off' );
$( this ).children( ".face" ).removeClass( 'off' );
$( this ).parent( ".cards" ).addClass( 'big' );
$( this ).addClass('flipped');
} else {
$( ".face" ).removeClass( 'off' );
$( ".cards" ).removeClass( 'big' );
$( this ).removeClass('flipped');
}
});
body {
height:100vh;
width:100vw;
margin:0px;
}
#container {
position: relative;
background: skyblue;
height:100%;
width:60%;
overflow: hidden;
margin:auto;
}
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.cards {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
width: 80%;
height: 20%;
position: absolute;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
margin-left: 10%;
margin-right: 10%;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
z-index: 100;
}
.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.cards .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 2em;
font-family: arial, sans-serif;
text-align: center;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
.cards .card .front {
position: absolute;
background: tomato;
z-index: 1;
}
.cards .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: gold;
}
.cards .card .front,
.cards .card .back{
cursor: pointer;
}
.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class=cards style="top:0px">
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
<div class=cards style="top:25%">
<div class=card>
<div class="face front">
Card 2 Front
</div>
<div class="face back">
Card 2 Back
</div>
</div>
</div>
<div class=cards style="top:50%">
<div class=card>
<div class="face front">
Card 3 Front
</div>
<div class="face back">
Card 3 Back
</div>
</div>
</div>
<div class=cards style="top:75%">
<div class=card>
<div class="face front">
Card 4 Front
</div>
<div class="face back">
Card 4 Back
</div>
</div>
</div>
</div>

Just add !important to the new 'flipped' class attributes overwrites the old ones. The javascript line $( ".item" ).not( this ).addClass( 'off' ) removes the other cards when one is selected. The absolute position let everything on its place. The active card have a higher z-index to ensures that other cards will not activate the 'mouseleave' trigger. UPDATE: finally working 100% on Mozilla and Chrome. ps: a click opens the card and another click closes it.
$('.item').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".item" ).not( this ).addClass( 'off' );
$( this ).addClass('flipped');
} else {
$( ".item" ).removeClass( 'off' );
$( this ).removeClass('flipped');
}
});
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
}
.cards {
width: 100%;
height: 100%;
background: lavender;
position: relative;
-webkit-perspective: 900px;
perspective: 900px;
}
.flipped {
top: 0% !important;
height: 100% !important;
width: 100% !important;
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
color: rgba(0, 0, 0, 0.0);
z-index:100;
-webkit-transform-style: preserve-3d;
background: tomato;
}
.flipped:after {
content: 'More text on here.';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
color: rgba(0, 0, 0, 1.0);
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
background: gold;
}
.card {
height: 22%;
width: 100%;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
display: block;
position: absolute;
background: tomato;
}
.aaa {
top:0%;
}
.bbb {
top:26%;
}
.ccc {
top:52%;
}
.ddd {
top:78%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card item aaa">
<div class="face front">Some text on here.</div>
</div>
<div class="card item bbb">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ccc">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ddd">
<div class="face front">Some text on here.</div>
</div>
</div>
</div>

Just play with Element.classList and CSS transitions
// Function to flip the card and expand the content
function flipMe() {
console.log(this.innerHTML);
var card = this.querySelector('.card');
card.classList.add('flipped');
// this handler will be executed every time the cursor is moved off the card
card.addEventListener("mouseout", function( event ) {
this.classList.remove('flipped');
}, false);
}
// Define our variables
var cardWrapper = document.querySelector('.cardWrapper');
cardWrapper.addEventListener("click", flipMe, false);
:root {
background: #CAC8CC;
}
.cardWrapper {
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
width: 400px;
height: 300px;
position: relative;
margin: 100px auto;
}
.cardWrapper .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
}
.cardWrapper .card {
width: 100%;
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
}
.cardWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 4em;
text-align: center;
}
.cardWrapper .card .front {
position: absolute;
background: black;
color: white;
z-index: 1;
}
.cardWrapper .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background-color: #0095ff;
}
.cardWrapper .card .front,
.cardWrapper .card .back{
cursor: pointer;
}
<div class=cardWrapper>
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>