Develop Reference

IE Fallback for Hover animation

I am trying to put together a fallback in Internet Explorer for hovering over an element.
In Chrome, the element pops and looks neat but not in IE :(
Currently there is a time delay before the background colour appears.
I'm guessing -webkit-animation-name is the root of my issue.
http://jsfiddle.net/8j249sre/
<div class="effects">
<a class="hvr-pop" href="#">Pop</a>
</div>
/* Pop */
#-webkit-keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
#keyframes hvr-pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
.hvr-pop {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
-webkit-animation-name: hvr-pop;
animation-name: hvr-pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

Adding this to my .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { resolved my issue :-)
-ms-animation-name:none;

flipping css 3 + js card , only flipps all together

Hey there i found a nice IE compatible card flip code here, i modified it and it works so far. only issue is that it does flip all cards instead of the selected one. i tried to modify the js code but it somehow doesnt work:
http://codepen.io/HendrikEng/pen/pbOYYp
html:
<div class="c-services__item">
<div class="c-services__item__content">
<div class="c-services__item--front">Front</div>
<div class="c-services__item--back">Back</div>
</div>
</div>
<div class="c-services__item">
<div class="c-services__item__content">
<div class="c-services__item--front">Front</div>
<div class="c-services__item--back">Back</div>
</div>
</div>
js:
$('.c-services__item').hover(function(){$('.c-services__item').toggleClass('applyflip');}.bind(this));
i tried to modify it to :
$(".c-services__item").hover(function(){
$(this).find(".c-services__item").toggleClass("applyflip");}.bind(this));
});
});
but that doesnt work at all
css :
.c-services__item {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
width: 200px;
height: 337px;
}
.c-services__item .c-services__item__content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
// content backface is visible so that static content still appears
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
position:relative;
width: 100%;
height: 337px;
}
.c-services__item.applyflip .c-services__item__content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.c-services__item .c-services__item__content .c-services__item--static {
// Half way through the card flip, rotate static content to 0 degrees
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 337px;
line-height:100px;
}
.c-services__item.applyflip .c-services__item__content .c-services__item--static {
// Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.c-services__item .c-services__item__content .c-services__item--front {
background-color: skyblue;
color: tomato;
}
.c-services__item .c-services__item__content .c-services__item--back {
background-color: tomato;
color: skyblue;
}
.c-services__item .c-services__item__content .c-services__item--front, .c-services__item .c-services__item__content .c-services__item--back {
// Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
overflow: hidden;
width: 100%;
height: 337px;
text-align: center;
}
.c-services__item .c-services__item__content .c-services__item--front, .c-services__item.applyflip .c-services__item__content .c-services__item--front {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.c-services__item .c-services__item__content .c-services__item--back, .c-services__item.applyflip .c-services__item__content .c-services__item--back {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.c-services__item .c-services__item__content .c-services__item--front, .c-services__item.applyflip .c-services__item__content .c-services__item--back {
// IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip.
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.c-services__item.applyflip .c-services__item__content .c-services__item--front, .c-services__item .c-services__item__content .c-services__item--back {
// IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip.
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
#keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-ms-keyframes donothing { 0% { } 100% { } }

You don't need to use .find().
$(".c-services__item").hover(function(){
$(this).toggleClass("applyflip");

Flip only one DIV and not all of the same class

Both the divs that have same class names are flipping if you hover only one. Just the div that hovered should flip and not all that have the same class name. JQuery code needs to be tweaked rest is all good. So only active div needs to be changed and not all classes with the same name.
<div class="card col-lg-2 col-md-2 block1 ">
<div class="content">
<div class="cardFront">
<br>
<h1>Front Content</h1>
</div>
<div class="cardBack">BACK CONTENT</div>
</div>
</div>
<div class="card col-lg-2 col-md-2 block2 ">
<div class="content div2">
<div class="cardFront">
<br>
<h1>Front Content</h1>
</div>
<div class="cardBack">BACK CONTENT</div>
</div>
</div>
CSS:
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
width:200px;
height:180px;
display:block;
margin: 0 0 20px 28px;
padding: 0 0 20px 0;
text-align: center;
color: white;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
top: 0;
left: 0;
height: 0;
width: 100%;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-image:url('../images/back10.png');
background-color: #961B1D;
}
.card .content .cardBack {
background-color: #961B1D;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
#keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-ms-keyframes donothing { 0% { } 100% { } }
JS:
$('.card').hover(function(){
$('.card').toggleClass('applyflip');
}.bind(this));

Just replace $('.card') by $(this) to get the current element
$('.card').hover(function(){
$(this).toggleClass('applyflip');
});
And you don't need and shouldn't bind(this). jQuery does that for you.

You have to use the "this" in your function to say which one you mean.
$('.card').on("hover", function(){
$(this).toggleClass('applyflip');
});

Elements shakes during use jQuery.animate() [duplicate]

I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.
You can see it happening here:
http://jsfiddle.net/MfUMd/1/
HTML:
<div class="wrap">
<img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>
<div class="wrap">
<div class="block"></div>
</div>
CSS:
.wrap {
margin:50px auto;
width: 100px;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
display:block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Comment out the margin:0 auto; line to make it go away.
Anyone have any ideas of how to stop this while keeping the page centered?
I'm using Version 24.0.1312.57 on OSX 10.6.8
Cheers

Actually just add this to the site container which holds all the elements:
-webkit-backface-visibility: hidden;
Should fix it!
Gino

I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.

will-change: transform; on the element helped to me in 2022 (Chrome). No more 1px shift of the text inside the element after zoom animation.

there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.
Anyway, I will suggest this approach instead:
body{
width:100%;
float:left;
}
.wrap {
margin: 50px 45%;
width: 5%;
float: left;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Here is the updated fiddle

For 3d transform use this instead:
-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);

How do I rotate a image 360 degree around is own axis in JavaScript?

I have tried for two days now to find a way to rotate my image while i input a button. What i want help with is to help me get the code to rotate a image in Javascript called images[0] around its own axis. I know this may look hard but i have tried aswell and I really need help from professionals.

Based upon Xotic750's jsfiddle, here is an example using animation and #keyframes (using -webkit- prefix, modify for other browsers).
CSS
#-webkit-keyframes r {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#r:hover ~ img {
-webkit-animation: r 2s infinite linear;
}
#-webkit-keyframes y {
0% { -webkit-transform: rotateY(0deg); }
100% { -webkit-transform: rotateY(360deg); }
}
#y:hover ~ img {
-webkit-animation: y 2s infinite linear;
}
HTML
<button id="r">R</button>
<button id="y">Y</button>
<br/> <br/>
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />

Paul S has provided a much better answer.
Here is an example of rotating an image 90 degrees
CSS
#container {
position: relative;
width: 450px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#card {
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#container:hover #card, #container.hover_effect #card {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
HMTML
<div id="container">
<div id="card">
<img src="http://img844.imageshack.us/img844/2656/impreza20061sh5.jpg" />
</div>
</div>
jsfiddle