turn a div using jQuery to display another one

turn a div using jQuery to display another one - javascript

im trying to turn a div and than display another div i used javascript and it works but i want to apply it to more than 1 group of divs so i would like to work with classes and not id's.
var init = function() {
var card = document.getElementById('card');
document.getElementById('flip').addEventListener( 'click', function() {
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
var init = function() {
var card = document.getElementById('card');
document.getElementById('flipback').addEventListener( 'click', function() {
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
<section class="container">
<div id="card">
<figure class="front" id="flip"></figure>
<figure class="back" id="flipback">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
</div>
</section>

HTML
<div class="flip">
<div class="card">
<div class="face front"> Hello </div>
<div class="face back">
You turned me
</div>
</div>
</div>
jQuery
$(".flip").hover(function() {
$(this).find(".card").toggleClass("flipped");
return false;
});
CSS
.flip {
-webkit-perspective: 800;
-ms-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
width: 240px;
height: 310px;
position: relative;
margin: 0px auto;
}
.flip .card.flipped {
transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
/* IE 9 */
-moz-transform: rotatey(-180deg);
/* Firefox */
-webkit-transform: rotatey(-180deg);
/* Safari and Chrome */
-o-transform: rotatey(-180deg);
/* Opera */
}
.flip .card {
width: 200px;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
width: 200px;
height: 100%;
position: absolute;
text-align: center;
backface-visibility: hidden;
/* W3C */
-webkit-backface-visibility: hidden;
/* Safari & Chrome */
-moz-backface-visibility: hidden;
/* Firefox */
-ms-backface-visibility: hidden;
/* Internet Explorer */
-o-backface-visibility: hidden;
/* Opera */
}
.flip .card .front {
position: absolute;
background: white;
}
.flip .card .back {
background: white;
transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
/* IE 9 */
-moz-transform: rotatey(-180deg);
/* Firefox */
-webkit-transform: rotatey(-180deg);
/* Safari and Chrome */
-o-transform: rotatey(-180deg);
/* Opera */
}
https://jsfiddle.net/oxn1ccd9/
This will surely work. Happy Coding :)

$(function() {
$('.flip').click(function(e) {
e.preventDefault();
$(this).closest('.card').toggleClass('flipped');
});
});
.front, .back {
transition: transform 0.25s linear;
backface-visibility: hidden;
position: absolute;
color: #000;
top: 0;
left: 0;
}
.front {
background: #0f0;
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background: #f00;
}
.flipped .front {
transform: rotateY(180deg);
}
.flipped .back {
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<figure class="flip front">Lorem ipsum dolor sit amet</figure>
<figure class="flip back">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
</div>
</section>

Related

How to limit clicks on elements

My idea is to create flipping card game. When user flip the card he receives the points, which are randomly generated. Okay, now the user can flip the card and check how much points he will receive, but I want to limit how many cards he can flip. For example, there are 4 cards now. Only 2 of them should be able to open. I'll be thankful for every advice.
$('.front').html('dd');
$('.card').each(function() {
$(this).on("click", function() {
$(this).addClass("flipped");
});
});
function getNumber() {
$('.card .back').each(function() {
var minNumber = 0;
var maxNumber = 2;
var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
$(this).html(randomnumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>

To limit the number of cards which can be flipped, add a condition to the click handler which checks how many cards there are with the class flipped. If two already exist then you can disallow any further clicks from having an effect.
Also note that you don't need the each() loop to add a click() handler to multiple elements. Similarly you don't need a loop to set the html(), just provide a function which returns the value to set. Try this:
$('.front').html('dd');
$('.card').on("click", function() {
if ($('.flipped').length < 2) {
$(this).addClass("flipped");
} else {
console.log('You already flipped two cards!');
}
});
function getNumber() {
var minNumber = 0;
var maxNumber = 2;
$('.card .back').html(function() {
return Math.floor(Math.random() * (maxNumber + 1) + minNumber);
});
}
getNumber();
.container {
width: 200px;
height: 260px;
float: left;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</section>

Multiple Card Flip jQuery

I'm looking to have multiple cards flip individually, but I'm not that well versed in jQuery/JS and I'm having issues with figuring out the code, and could use a little help. Also, the tiles aren't flipping back over when clicked.
$('.js-click').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
$('.js-click1').on('click', function() {
$('.card').not(this).removeClass('flipped');
$('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click1">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

Looks like the issue came from trying to find the appropriate .card element (looks like it was finding both of them) and then removing a class + toggling a class will always add it:
remove .flipped
toggle .flipped
.flipped is always added
so you'll never turn your cards back over.
Quick fix, look for the clicked element's parent() and target that...
$('.js-click').on('click', function() {
$(this).parent('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

First you'll want to give both cards the class of js-click so that you can target both of them with the same $('.js-click') selector. Then as you want to flip the target's .card, all you have to do is toggle the class flipped on $(this).parent().
This can be seen in the following:
$('.js-click').on('click', function() {
$(this).parent().toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

You are toggling the flipped class on all elements with .card what you need it to do it just for the associated elements like
$(this).closest('.card').toggleClass('flipped');
Moreover, you can reduce your code by assigning js-click class to both buttons
Here is snippet
$('.js-click').on('click', function() {
$(this).closest('.card').toggleClass('flipped');
});
.flipContainer {
width: 260px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 200px;
color: white;
text-align: center;
font-weight: bold;
font-size: 12px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>
<section class="flipContainer">
<div class="card">
<button class="js-click">+</button>
<div class="front">Custom Installation</div>
<div class="back">Custom Installation details</div>
</div>
</section>

Divs are not flipping on IE

Pre-story: I am using CSS and jQuery to create a flipping effect.
How I am achieving it: For that purpose I am using preserve-3d.
Good news: It works all fine on all major browsers
Problem: It does not work in IE.
Solution approach: Initially I thought it is not applying the preserve but then I think it is just not firing the back element.
Help: Can you please help, link to my JSFiddle
function flip() {
$('.card').toggleClass('flipped');
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>

As described in the remarks it's a compatibility issue with IE.
I suggest a simple workaround, hoping it could help:
var ua = window.navigator.userAgent;
var msie = (ua.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) ? true : false;
var i = 0;
function flip() {
$('.card').toggleClass('flipped')
if (msie) {
// the timeout happens after 400ms because on my computer this create the right effect
i = (i + 1) % 2;
setTimeout(function (i) {
$('.card > div:eq(' + i + ')').css('backface-visibility', 'visible');
$('.card > div:not(:eq(' + i + '))').css('backface-visibility', 'hidden');
}, 400, i);
}
}
.container {
width: 200px;
height: 260px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
<div class="card" onclick="flip()">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>

CSS tile flip on hover

I have some Div Boxes how can i get them flipped on hover? I tried already some examples i found but i cant get it working? Can someone please help me?
.kachel_a_image_1 {
height:150px;
width:150px;
margin:auto auto;
margin-top:15px;
background:red;
}
.kachel_wrapper {
margin: auto auto;
width: 90%;
min-height: 450px;
margin-top: 55px;
text-align: center;
padding:10px;
padding-top:30px;
padding-bottom:20px;
}
.kachel_text {
font-size:10px;
color:white;
line-height:15px;
text-align:center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-left: 58px;
background: #6e7176;
display: inline-block;
margin-bottom:30px;
}
<div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div>
I only want to use Css and no JS if its possible. Can someone explain me how this works or giving me a really simple example :S ?

Use transform:
.kachel:hover{
transform: rotateX(150deg);
}
more Information: http://www.w3schools.com/css/css3_3dtransforms.asp
Also if you want to add a duration to the animation use transition-duration
.kachel{
transition-duration: 5s;
}
for changing the content after the hover use the pseudo element :after and the attribute content.
For example:
.kachel:hover:after{
content: 'hovering';
}
You may have to change it a bit, i haven't tested it.

Using transition and backface-visibility.
Probably the best soultion is to use simple transform and backface-visibility. jsfiddle
.front, .back{
width: 100px;
height: 100px;
}
.front{
background-color: blue;
}
.back{
background-color: red;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
Using #-webkit-keyframe
Another approach is to use animation and #-webkit-keyframes. However this will run the animation one time initially. (jsfiddle)
.box, .wrapper {
width: 100px;
height: 100px;
position: absolute;
}
.back {
transform: rotateY(90deg);
background-color: red;
-webkit-animation: in 0.2s forwards;
animation in 1s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
.front {
transform: rotateY(90deg);
background-color: blue;
-webkit-animation: out 0.2s forwards;
animation out 0.2s forwards;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
.wrapper:hover .box.back {
-webkit-animation: out 0.2s forwards;
animation: out 0.2s forwards;
}
.wrapper:hover .box.front {
-webkit-animation: in 0.2s forwards;
animation: in 0.2s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
#-webkit-keyframes in {
from {
-webkit-transform: rotateY(90deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes out {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
<div class="wrapper">
<div class="box back"></div>
<div class="box front"></div>
</div>

For this I would use backface-visibility in conjunction with transform
<div class="container">
<div class="box front">image</div>
<div class="box back">Social</div>
</div>
CSS:
.container {
width: 180px;
height: 180px;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
background: red;
z-index: 2;
}
.back {
z-index: 1;
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color:white;
}
.container:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Here's a JS fiddle
EDIT: The above fiddle has been edited to have an outer wrapper which initiates the flip. This ensures that the animation doesn't jitter.
.wrapper {
width: 180px;
}
.wrapper:hover .container {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

How to set the child div height as parent height?

How to set the child div height as parent height? i don't want to set height in CSS.
Here parent div height is 300px, but car1front & card1back is not taking that height? In css i given height is auto, even though is not taking.
please see the JSFiddle link: http://jsfiddle.net/tvrajja/08samL77/
Note: flip-container div actually resides in usercontrol.aspx
Thanks for your help.
<div style="height: 300px">
<div id="FlipMainId" class="flip-container" ontouchstart="this.classList.toggle('hover');" runat="server">
<div id="Card1" class="flipper" runat="server">
<div id="Card1Front" class="front" runat="server">
<div class="name">
Front
</div>
</div>
<div id="Card1Back" class="back" runat="server" style="border: solid">
Back
</div>
</div>
</div>
</div>

What imgonzalves said you have to add height: 100%;
Its working for me in your fiddle with this css:
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
height: 100%;
width: 100%;
}
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0px;
}
.flipper {
height:100%;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
height:100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: none;
}
.front .name {
display: inline-block;
font-family: Helvetica, times, serif;
margin: 0 auto;
padding: 1px;
border-radius: 2px;
height: 100%;
width: 100%;
position: absolute;
background-color: #DCF3FF;
}

We Keep Coding

JavaScript is the programming language of the Web.

turn a div using jQuery to display another one - javascript

Related

How to limit clicks on elements

Multiple Card Flip jQuery

Divs are not flipping on IE

CSS tile flip on hover

How to set the child div height as parent height?

Categories

Resources