We Keep Coding

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>

How to get jQuery to wait until an animation is finished? [duplicate]

This question already has answers here:
How to use jQuery to wait for the end of CSS3 transitions?
(6 answers)
Closed 5 years ago.
I need to wait (prevent) until this animation (flip card) is finished, if you hover again while animation is running it triggers again and restart the animation.
1) I want leave finish the currently animation even you hover again or you hover out. This is what I have tried so far:
if(!$(this).find(".card").is(':animated')){
$(this).find(".card").toggleClass('flipped')
}
And this:
$(":animated").promise().done(function() {
$(this).find(".card").toggleClass('flipped')
});
2) If you re-hover flipped card (blue part) and you leave the cursor inside dont flip it again to the red part while cursor is inside. I tried this canceling setTimeout with clearTimeout but still doesnt work:
$(document).ready(function () {
var funct = 0
$(".container").hover(function () {
clearTimeout(funct);
$(this).find(".card").addClass('flipped')
}, function () {
var val = $(this).find(".card")
var funct = setTimeout(function () {
val.removeClass('flipped')
}, 2000)
})
})
Note: I use setTimeOut function because I need reverse flip card 2 seconds after you hover out and I want keep it.
Here is the working snippet code:
$(document).ready(function () {
$(".container").hover(function(){
$(this).find(".card").toggleClass('flipped')
}, function(){
var val = $(this).find(".card")
setTimeout(function(){
val.toggleClass('flipped')
}, 2000)
})
})
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.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: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front"><p>Test</p></div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

Run a conditional check first to determine if the trigger class flipped has already been added to the element in question.
This will imply that the animation is still running or currently active (if the class flipped is already present).
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
$(document).ready(function() {
$(".container").hover(function() {
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
}, function() {
var val = $(this).find(".card")
setTimeout(function() {
val.removeClass('flipped')
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.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: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Then replace the .toggleClass() method with the .removeClass() method in your setTimeout() function for better "fool-proofing" and more reliable application during intended events - so that this class is never unintentionally added when it should simply be removed.
Edit
To address the issue you've pointed out in the comments, see what the embedded code snippet below demonstrates.
Essentially, a class is added as a flag to check against during specific events at specific times.
$(document).ready(function() {
$('.container').hover(function() {
if (!$(this).find('.card').hasClass('flipped')) {
$(this).find('.card').toggleClass('flipped')
}
$(this).find('.card').addClass('hovered'); /* add class - this will be our flag we'll check against */
}, function() {
var val = $(this).find('.card');
$(this).find('.card').removeClass('hovered'); /* remove class - if we refrain from hovering over again, the condition block below will return true and run the code within */
setTimeout(function() {
if(!val.hasClass('hovered')) {
val.removeClass('flipped')
}
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.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: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

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 prevent CSS3 transform from make elements unclickable

Please look at my live code ::
CODE PEN
CSS3 translate: rotate() makes elements unclickable unless rotations == 0
I'm using the accelorameter to move elements over an axis. Unfortunatly these elements become unclickable when their rotations isnt at at (0,0,0). How do I fix this, so that all elements are clickable at all times?
<div ng-app="morningharwoodApp" ng-controller="MainCtrl">
<div class="wrap">
<div class="cube">
<div class="icon-wrapper">
<div class="icons" ng-repeat="(key, val) in squares" ng-style="perspective" ng-click="toggle.menu()">
<p>x: {{acceleration.x }}</p>
<p>y: {{acceleration.y}}</p>
<p>z: {{acceleration.z}}</p>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body, .page-container {
box-sizing: border-box;
height: 100%;
padding:0;
margin:0;
}
*, *:before, *:after {
box-sizing: inherit;
}
.group:after {
content: "";
display: table;
clear: both;
}
.wrap {
position: relative;
width: 100%;
height: 100%;
padding: 3.5%;
font-family: Helvetica, Arial, sans-serif;
}
.cube {
position: relative;
width: 100%;
height: 100%;
background: url(http://placekitten.com/1600/1080);
background-size: cover;
padding: 30px;
#extend .group;
}
.icon-wrapper {
#extend .group;
}
.fill {
#extend .group;
height: 100%;
width: 100%;
position: relative;
top:0;
left:0;
background: #fff;
}
.icons {
padding: 25px;
height: 250px;
width: 250px;
margin: 12px;
color: #fff;
background: black;
float: left;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 250ms ease;
-o-transition: -o-transform 250ms ease;
transition: transform 250ms ease;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transform:translateZ(1px);
}
JS:
$scope.navigation = {
status: false
};
$scope.toggle = {
menu: function() {
$scope.navigation.status = !$scope.navigation.status;
console.log($scope.navigation.status);
}
};
$scope.squares = [1,2,3,4,5,6,7,8];
if ($window.DeviceMotionEvent !== undefined) {
$window.ondevicemotion = function(event) {
$scope.acceleration = {
x: Math.min(Math.max(parseInt(event.accelerationIncludingGravity.x*10), -30), 30) | 0,
y: Math.min(Math.max(parseInt(event.accelerationIncludingGravity.y*2), -30), 30) | 0,
z: Math.min(Math.max(parseInt(event.accelerationIncludingGravity.z), -30), 30) | 0
};
$scope.perspective = {
transform: 'perspective(800px) rotateY('+ $scope.acceleration.x +'deg)' + 'rotateX('+ $scope.acceleration.y +'deg)'
// 'rotateX('+ $scope.acceleration.x +'deg)' +'rotateZ('+ $scope.acceleration.z +'deg)'
};
$scope.$digest();
};
}

What I noticed playing around with it is if I rotated a square around the Y axis, the side sticking out towards me would be "clickable," while the side pointed away would not be. Adding "z-index: 1" to one of the container divs (icon-wrapper or cube or wrap) seems to help.

jQuery display:none child div?

I have a 3D flip animation on an div container element. It works with a hover function.
This element have 2 main child containers : front and back.
Inside the front and back container there are a child div container where there are a picture.
<div class="element hover blog" id="_13" >
<div class="front shadow">
<div class="element-image-front"><div class="overlay"></div>
<img src="./Post thumbnail images/formlabs.jpg"/>
</div></div>
<div class="back">
<div class="element-image-back">
<img src="./Post thumbnail images/formlabs.jpg">
</div>
</div>
</div>
In my css the back container and back img container are display none.
I want to display block the back container and img container on hover fonction. And to display none when the mouse is not on hover.
I Have a problem to correctly write the code with $(this).
My script works fine, howerver I want to only display the back and the img back of the element hover.
Because I have many element on the same page
$(document).ready(function(){
$('.hover').hover(function(){
$(this).addClass('flip');
$('.element-image-back img').css('display', 'block');
$('.back').css('display', 'block');
},function(){
$(this).removeClass('flip');
$('.hover').$('.element-image-back img').css('display', 'none');
$('.hover').$('.back').css('display', 'none');
});
});
My css:
.element {
cursor: pointer;
width: 250px;
height: 180px;
margin: 3px;
float: left;
overflow: visible;
position: relative;
}
.element-image-front img{
position:absolute;
z-index: 3;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
outline: 1px solid rgba(0,0,0,0.1);
overflow:hidden;
}
.element-image-back img{
position: absolute;
display: none;
z-index: 4;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
opacity: 0.035;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.element .front {
position: absolute;
overflow: hidden;
z-index: 900;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
background: #333;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.element.flip .front {
position: absolute;
z-index: 900;
width: 100%;
height: 100%;
background: #333;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.element .back {
position: absolute;
display: none;
overflow: hidden;
z-index: 800;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
background: #434343;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.element.flip .back {
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
background: #434343; /***#191919***/
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
-moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
}
.click .front {
cursor: pointer;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
.click.flip .front {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
}
.click .back {
cursor: pointer;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
}
.click.flip .back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
EDIT: here a fiddle with css :hover :
http://fiddle.jshell.net/9B5mS/
The is still a problem with the animation with css :hover ....

Your jquery chaining is wrong in $('.hover').$('.element-image-back img'):
Try to alter your code like this
$(document).ready(function () {
$('.hover').hover(function () {
$(this).addClass('flip');
$('.element-image-back img').css('display', 'block');
$('.back').css('display', 'block');
}, function () {
$(this).removeClass('flip');
$('.element-image-back img').css('display', 'none');
$('.back').css('display', 'none');
});
});