I got this CSS Animation that flips an image to another image which is awesome after I got help from this forum on how to add a vendor prefix to get it to work in Safari. Unfortunately it still doesn't work on Iphone :(
Anyone know how to solve this?
CODE:
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="https://placekitten.com/600/332">
</div>
<div class="back">
<img src="https://placekitten.com/600/331">
</div>
</div>
</div>
</body>
CSS:
#-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
#keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
.flip-container, .front, .back {
width: 600px;
height: 332px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
/* flip speed goes here */
.flipper {
transition: 1s;
transform-style: preserve-3d;
position: relative;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: 1000px;
}
/* front pane, placed above back */
.front {
background: white;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: white;
}
You should review and apply vendor prefix for ALL required properties (such as perspective, transform-style, transition also).
Also you should add units to perspective property (for example: -webkit-perspective: 1000px).
Practically, to prevent code overloading by vendor prefixes use -prefix-free javascript library.
When you using -Prefix-free javascript library you don`t care about vendor prefixes.
Official site is here: http://leaverou.github.io/prefixfree/
Remove the ontouchstart="this.classList.toggle('hover');" in all your div's in html and add below javascript.
$('.flip-container').click(function(){
$(this).find('.flipper').addClass('hover').mouseleave(function(){
$(this).removeClass('hover');
});
return false;
});
Related
Using David Walsh css flip effect for an image that suppose to change to another. But wondering If it can be triggered in say 3 seconds instead of mouseover? Sorry! Kind on a n00b to this. :(
Any response will be very appreciated :)
CSS Flip homepage: http://davidwalsh.name/css-flip
The Code:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
The CSS:
/* 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: 320px;
height: 480px;
}
/* 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);
}
You'll want to use CSS animations instead of transitions on hover. Using animation-fill-mode: forwards the animation will only play once. You'll have to alter it if you want it to flip back over. animation-delay is used to make it wait 3 seconds.
Here's a resource for using CSS animations: MDN docs
#-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
#keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
.flipper {
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
#keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
background: blue;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: green;
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
I have made an animated profile picture and when hovered on it flips around and shows the backside. It works perfectly in Firefox and Chrome, but not in Safari.
It does flip around, but the image changes back to the frontside but facing in opposite direction.
this is what I see 1 second after I hover on it. (This is the front-side, but flipped horizontally)
Link: http://www.ik-ben-zzp.nl/testsite/index.php
Here is the HTML CSS of the profile picture.
What is the problem here?
Thanks
Ps. Tested on Safari iPad
.roundedImage {
overflow:hidden;
width: 200px;
height:200px;
margin-left: auto;
margin-right: auto;
-webkit-animation:pop-in 0.8s;
-moz-animation:pop-in 0.8s;
-ms-animation:pop-in 0.8s;
}
.flip-container {
perspective: 1000;
z-index:3;
margin-bottom:200px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
margin-left:auto;
margin-right:auto;
}
.flipper {
transition: 0.6s;
-webkit-transition: 0.6s;
-ms-transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.front div, .back div {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-webkit-animation:pop-in 0.8s;
-moz-animation:pop-in 0.8s;
-ms-animation:pop-in 0.8s;
border: 4px solid white;
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover')">
<div class="roundedImage">
<div class="flipper">
<div class="front">
<div style="background: url(Images/ProfileFront.jpg); height:200px; background-size: cover;"></div>
</div>
<div class="back">
<div style="background:url(Images/ProfileBack.jpg); height:200px; background-size:cover;"></div>
</div>
</div> <!--FLIPPER-->
</div> <!-- ROUNDED IMAGE -->
</div> <!-- FLIP CONTAINER -->
Add -webkit- prefixes to all necessary css property. You missed to 'backface-visibility'.
Remove the ontouchstart="this.classList.toggle('hover');" in all your div's in html and add below javascript. you can comment 'return false' incase you have any serverside clickable items inside the divs of 'front' or 'back to work
$('.flip-container').click(function(){
$(this).find('.flipper').addClass('hover').mouseleave(function(){
$(this).removeClass('hover');
});
return false;
});
I'm learning to use CSS to make some animations (start from zero). I saw this cool example on a website. I would like to apply this to my own CSS. However I'm thinking several changes to this
1) Can I change this by a timer. So it can flip automatically after a certain period (say flip every 10 seconds) without any mouse movement.
2) I have two <div> in my HTML file that I want to flip from one to anther. Unfortunately they have got the same class (Something like :widget-inner loadable .widget-size-2x1). So can I use #id (ID selector) instead of class selector in CSS file?
3) I saw other examples using an extra JS file to achieve the flipping animation. Ideally can I just use only CSS to do this?
I have a sample code below which only works partly. It doesn't show the first picture. Please guide on how to make the required changes.
#draggable {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#dashboard {
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {transform: rotateY(0deg);}
50% {transform: rotateY(180deg);}
90% {transform: rotateY(180deg);}
100% {transform: rotateY(0deg);}
}
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"/>
</div>
<div class="widget-inner loadable" id="b">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
Based on the information provided in the question and your comments, it seems like the below snippet is what you require. This would keep flipping infinitely without the need for any mouse interactions to trigger the flip action. When the image is shown, the text will get hidden behind and vice-versa.
The changes that I have made are as follows:
Added transform to rotate the div which contains the image (#a) by -180deg on load because this has to initially look as though it is behind the div that contains the text (#b).
When we flip, we have to flip both #a and #b synchronously but in exactly opposing manner. That is, when #a is made to come forward by using rotateY(0deg), the #b has to go behind and hence at that point in time, it should have rotateY(180deg) and vice-versa. This cannot be achieved using a single animation and hence I have added a separate animation keyframe setting for the front and back sides of the flip.
#draggable {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#dashboard {
-webkit-perspective: 1000;
perspective: 1000;
}
#dashboard {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
transition: all 1.0s linear;
}
.loadable {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#a{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: mymoveback 20s infinite;
animation: mymoveback 20s infinite;
}
#b {
display: block;
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
-webkit-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
40% {
-webkit-transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(180deg);
}
90% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes mymoveback {
40% {
-webkit-transform: rotateY(-180deg);
}
50% {
-webkit-transform: rotateY(0deg);
}
90% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(-180deg);
}
}
#keyframes mymove {
40% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
90% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
#keyframes mymoveback {
40% {
transform: rotateY(-180deg);
}
50% {
transform: rotateY(0deg);
}
90% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-180deg);
}
}
<div id="draggable">
<div id="dashboard" class="shadow">
<div class="widget-inner loadable" id="a">
<img src="http://lorempixel.com/450/281"/>
</div>
<div class="widget-inner loadable" id="b">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
Flip images to flip on some interval using setInterval method. Demo
$(function() {
setInterval(function() {
$('#f1_card').toggleClass("transformStyle transformRotate");
}, 3000)
})
Sure. you can use pseudo class :hover, and css property
transform: rotateY(180deg); for doing flipping you can control timing using animation and keyframes
I somehow manage to create this. I created a cube, that rotate horizontally, when it is hovered, but i want it to stay at its current location when it is not hovered. Ive been searching this for awhile now, but I cant seem to find the answer.
<html>
<style>
.wrap {
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
-moz-perspective-origin: 50% 100px;
-webkit-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
margin: 0 auto;
margin-top: 30px;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
background: orange;
opacity: 0.5;
}
.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
-moz-transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
background: yellow;
opacity: 0.5;
}
.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
-moz-transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
background: violet;
opacity: 0.5;
}
.top {
-moz-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
background: green;
opacity: 0.5;
}
.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
-moz-transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
background: blue;
opacity: 0.5;
}
.front {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
background: red;
opacity: 0.5;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
.cube:hover {
animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
}
</style>
<body>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div
</body>
</html>
Anynone can point me to the right direction? thank you very much,
You can set the animation for all states of .cube, and just toggle animation-play-state on hovering (see JSFiddle):
.cube {
/* other styles... */
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* other rules... */
.cube:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
Also, I suppose that now there is no much need to specify -moz-properties for transforms and animations because Firefox supports them unprefixed since version 16 (it's 7 versions back!).
Following CSS will call in case of mouse hover, as there is no spinning animation within this, it won't trigger any animation
.cube : hover {
//Do nothing
}
I am trying to flip the div vertically from front side to back side and then restore it .But when I hover instead of flipping it is folded into a thin strip.What is the problem?
[The horizontal flip was working fine.Problem occured when I changed it to vertical flip]
<html>
<head>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateX(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* 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;
background-color:red;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color:green;
}
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 213.5px; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
</style>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
Front Side
</div>
<div class="back">
Back Side
</div>
</div>
</div>
</body>
</html>
Simply make all the rotateYs be rotateXs and make sure to add the class vertical to the container (since you have it in your CSS but not HTML)
Working demo
Changed HTML
<div class="vertical flip-container" ontouchstart="this.classList.toggle('hover');">
Updated CSS
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
position: absolute;
top: 0;
left: 0;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
/* front pane, placed above back */
.front {
z-index: 1;
background-color:red;
}
/* back, initially hidden pane */
.back {
transform: rotateX(-180deg);
background-color:green;
animation: toFront 0.3s linear normal forwards;
}
.vertical.flip-container {
position: relative;
}
.vertical.flip-container:hover .back {
animation-delay: 0.3s;
animation: toBack 0.3s linear normal forwards;
}
#keyframes toBack {
0% {z-index:0;}
100% {z-index:1;}
}
#keyframes toFront {
0% {z-index:1;}
100% {z-index:0;}
}
.vertical.flip-container .flipper {
transform-origin: 100% 240px; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
I added full functionality using CSS3 animations as well