It is probably very simple but i'm stuck trying to make a homepage automatic background slider like here : https://www.jackdavison.co.uk
That's probably Jquery but I found a way to have something similar with html and Css, only it keeps repeating.
Any help ?
You can see my code here:
HTML
<div class="wrapper">
<div class="sliding-background"></div>
</div>
CSS:
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
height: 560px;
width: 100%;
animation: slide 2s linear infinite;
animation-delay: 4000ms;
}
#keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -2000px, 0px);
}
}
See on Codepen here
Thank you !
You just need a minor change in your CSS. Just change animation: slide 2s linear infinite; to animation: slide 0.6s ease-out forwards;. Also, I have changed in -2000px to 100% in #keyframes in case if you have a full-height background.
animation-fill-mode: forwards; Let your element retain the style values from the last keyframe when the animation ends.
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
height: 560px;
width: 100%;
animation: slide 0.6s ease-out forwards;
animation-delay: 2000ms;
}
#keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -100%, 0px);
}
}
<div class="wrapper">
<div class="sliding-background"></div>
</div>
Please let me know if this helps.
To stop the animation and keep the last state use:
.sliding-background {
animation: slide 2s linear;
animation-fill-mode: forwards;
}
Thank you all for the help the clean code is this one :
Html
<div class="wrapper">
<div class="sliding-background"></div>
</div>
CSS
.wrapper {
overflow: hidden;
}
.sliding-background {
background-color: black;
width: 100%;
height: 100vh;
animation: slide 0.6s ease-out forwards;
animation-delay: 2000ms;
}
#keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(0px, -100%, 0px);
}
}
Related
I am trying to move two wheel images towards each other using the following code:
HTML:
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</body>
CSS:
body{
background:#fff;
}
body > img{
width:200px;
}
.leftwheel {
float:left;
-webkit-animation: rotationLeft 2s infinite linear;
animation: rotationLeft 2s infinite linear;
-moz-animation: rotationLeft 2s infinite linear;
}
#-webkit-keyframes rotationLeft {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);margin-left:25%;}
}
#-moz-keyframes rotationLeft {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);margin-left:25%;}
}
#keyframes rotationLeft {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);margin-left:25%;}
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
animation: rotationRight 2s infinite linear;
-moz-animation: rotationRight 2s infinite linear;
}
#-webkit-keyframes rotationRight {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-359deg);margin-right:25%;}
}
#-moz-keyframes rotationRight {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(-359deg);margin-right:25%;}
}
#keyframes rotationRight {
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);margin-right:25%;}
}
DEMO
Now the problem is, I want both the wheels to move towards each other, meet(collide) at the center and the movement should stop while the rotation still continues. But I have set the animation repeat as infinite since i want infinite rotation of the wheel. Can I achieve what I want just by using CSS? If not what are the javascript alternatives? Also how can I set one animation to repeat and other to happen only once in CSS?
Try wrapping your images in divs, and applying your second animation to the wrapping divs. Include forwards (for animation-fill-mode) in your animation shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) to make the element holds its final position (rather than resetting to its initial position).
Update:
Based on your comment below that the wheels should collide, I would nix the floats and positioning by margin, and would instead position by absolute. Note that (if I understand what you want), the to positions would probably need to be stated by calc(), which is newer technology but mostly supported (http://caniuse.com/#search=calc). Also, your image file includes padding, which you might want to crop in an image editor, or you could reverse in your CSS.
WORKING DEMO (refresh page to repeat animation): http://jsbin.com/jifup/4
CSS:
#-webkit-keyframes translationLeft {
from { left: 0%; }
to { left: calc(50% - 170px); }
}
#-webkit-keyframes translationRight {
from { right: 0%; }
to { right: calc(50% - 170px); }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
position: absolute;
margin: -18px;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
position: absolute;
margin: -18px;
}
.leftwheel {
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
-webkit-animation: rotationRight 2s infinite linear;
}
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
PREVIOUS ANSWER CODE:
WORKING DEMO (refresh page to see animation again and again): http://jsbin.com/jifup/1
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
CSS:
#-webkit-keyframes translationLeft {
from { margin-left: 0; }
to { margin-left: 25%; }
}
#-webkit-keyframes translationRight {
from { margin-right: 0; }
to { margin-right: 25%; }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
}
.leftwheel {
float: left;
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
}
infact i want to make Solar System for an Educational purpose! so a big yellow circle should be in the middle and others should spin around ! but i dont have any idea! just help with spining thing and i will find out other things! i find below code but it just spins around him self!
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
live demo : http://jsfiddle.net/hamidrezabstn/bLqak/
Refer to this tutorial/example for the solar system using CSS3:
CSS3 Solar System
Using simple CSS will do the trick:
http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
i found the simple answer too :D
.deform {
width: 200px;
height: 200px;
transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
animation: ccircle 5s infinite linear;
}
.planet {
width: 50px;
height: 50px;
position: absolute;
border-radius : 50px;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#keyframes circle {
from {transform: rotateZ(0deg)}
to {transform: rotateZ(360deg)}
}
#keyframes ccircle {
from {transform: rotateZ(360deg)}
to {transform: rotateZ(0deg)}
}
Demo: http://jsfiddle.net/hamidrezabstn/fgcPa/3/embedded/result/
Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.
Fiddle here: http://jsfiddle.net/bmh5g/
As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?
$('#trigger').on({
mouseenter: function() {
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
})
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>
I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});
#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
#keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
#-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>
Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):
CSS - in addition to the flipperUp keyframe posted by Blake above
#item.no-animation
{
animation: none;
}
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})
In addition to the answers here, please cache your $(selector)
So you pretty much do this var elements = $(selector); to cache.
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
For example, the accepted answer would look something like so:
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>
Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
I would write you a js fiddle for it but I dont know the syntax well enough.
Basically when you will need:
#keyframes flipper
#keyframes flipper-up //This does the opposite of flipper
and
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3 courtesy of Jake
CSS solution from MDN and almost supported by all browser
.animation(animationName 10s ease-in-out infinite alternate both running;)
You can make use of the attribute animation-direction to run the same animation in reverse.
If you couple this with one of the many methods described here for restarting an animation- we can start the animation forwards on mouseenter, then on mouseleave we can restart it and play it in reverse.
I don't know how to use jQuery very well, so I chose one of the non-jQuery methods mentioned in the article.
const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');
element_button.addEventListener("mouseenter", () => {
if (element_item.classList.contains('animate-backwards')) {
element_item.classList.remove('animate-backwards');
void element_item.offsetWidth;
}
element_item.classList.add('animate-forwards');
});
element_button.addEventListener("mouseleave", () => {
element_item.classList.remove('animate-forwards');
void element_item.offsetWidth;
element_item.classList.add('animate-backwards');
});
and
#item.animate-forwards {
animation: flipper 0.7s normal;
-webkit-animation: flipper 0.7s normal;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#item.animate-backwards {
animation: flipper 0.7s reverse;
-webkit-animation: flipper 0.7s reverse;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Here is a jsFiddle for the above code.
Worked fo me:
1 animation in reverse for the Element (from 100% to 0%)
1 separate animation forwards for the new class (from 0% to 100%)
And toggling that class would work
[1]: https://jsfiddle.net/q7bc4s0f/17/
Upd:
That way animation will play backwards on page load. To solve this you have to ADD new bacwards animation class on event ONCE and then toggle forwards animation class on that event.
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
So I have been looking for the flip card effect. There are a number of nice examples that work well with webkit browsers. For example:
http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html
But I have found none that works with Internet Explorer/Firefox as well. Do you guys perhaps have an example where a similar flip effect is done?
This seems to fit the bill...
http://lab.smashup.it/flip/
Quote: Flip is compatible with: Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)
Here is another one...
http://dev.jonraasch.com/quickflip/examples/
http://jonraasch.com/blog/quickflip-2-jquery-plugin
There is no "flip" in this one, but perhaps you'll find this helpful in another way...
http://malsup.com/jquery/cycle/browser.html
This one seems powerful, but you'll have to program the flip yourself...
https://github.com/heygrady/transform/wiki
There are -moz prefixes that should let you accomplish what you're trying to do.
See here:
http://css3playground.com/flip-card.php
Try adding -moz variants of all the -webkit magic here:
http://jsfiddle.net/nicooprat/GDdtS/
Or... if you're using Compass (http://compass-style.org) and Sass (sass-lang.com) like me, this works nicely in Chrome, Safari, and FF.
HTML
<div class="flip">
<div class="card">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
SASS with compass mixins
(http://compass-style.org/reference/compass/css3/transform/)
.flip
position: relative
+perspective(800)
width: 80%
height: 200px
.flip .card.flipped
+transform(rotatex(-180deg))
.flip .card
+transform-style(preserve-3d)
+transition(0.5s)
width: 100%
height: 100%
.flip .card .face
position: absolute
z-index: 2
+backface-visibility(hidden)
width: 100%
height: 100%
.flip .card .front
position: absolute
z-index: 1
.flip .card .back
+transform(rotatex(-180deg))
// Make it at least functional IE
.flip .card.flipped .back
z-index: 0
Check out this blog post from David Walsh: http://davidwalsh.name/css-flip
It has some great code for creating a flip effect that works on multiple browsers.
I also couldn't seem to find a good example of this anywhere, so I spent some way too much time making my own.
This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).
--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/
The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:
<div class="card">
<div class="content">
<div class="cardFront">FRONT CONTENT</div>
<div class="cardBack">BACK CONTENT</div>
<div class="cardStatic">STATIC CONTENT</div>
</div>
</div>
$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
margin:80px 150px;
width:320px;
height:243px;
vertical-align:top;
position:absolute;
display:block;
font-size:25px;
font-weight:bold;
}
.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;
border: 1px solid grey;
border-radius: 15px;
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;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
line-height:100px;
}
.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-color: skyblue;
color: tomato;
}
.card .content .cardBack {
background-color: tomato;
color: skyblue;
}
.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;
line-height:200px;
border-radius: 14px;
}
.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% { } }
I was trying to use this http://blog.guilhemmarty.com/flippy/, you can have a try.