We are from Annals.me & we are crazy for HTML5 
*Better use Safari to test this feature! Chrome is also supported, but not defaultly.*
Today we are going to show you how -webkit- implement a 3D flip
Also, you don't need to write any js code.
let have a quick look at what 3D means.
This is simple, and , confused.
The 3D flip before -webkit- came up is somewhat fake.
They just used the simple transform to simulate a 3D animation.
-webkit- provides you a way to convert the whole HTML aera into true 3D by a very simple line of CSS code:
(note this is affective only for the child element, this line of code converts the container(div, p etc) into 3D mode, so the children appended on which will look like 3D.)
Ok, let start.
first build a simple html structure like this
big DIV is the container, which are going to be converted into 3D later by CSS
small DIVs are two side of a flip card, note that the order is important: the second div is going to be "physically" at the front, while the first div is at the back.(you can define the z-index to change the layer sequences , but in this sample, I'd like to make it code-simple.)
Then, conver the container DIV into 3D
also use two different colors to modify the two children DIVs
and then, define the animation(remember it in [CSS3 tutorial 1]?)
we will make the div rotate with Y forever, so we add the flip into the style of those two children DIVs
note that the -webkit-backface-visibility:hidden; is important and necessary, without which you will see both the back and front side in sametime. It is not a bug, but a bad UE looking.
check the web, it is done~
well, sometimes you dont need the DIVs to rotate forever, just change the attribute "infinite" into "1" or "2"
Full code
Thanks for reading!
*Better use Safari to test this feature! Chrome is also supported, but not defaultly.*
Today we are going to show you how -webkit- implement a 3D flip
Also, you don't need to write any js code.
let have a quick look at what 3D means.
This is simple, and , confused.
The 3D flip before -webkit- came up is somewhat fake.
They just used the simple transform to simulate a 3D animation.
-webkit- provides you a way to convert the whole HTML aera into true 3D by a very simple line of CSS code:
Code:
-webkit-perspective: 1000;(note this is affective only for the child element, this line of code converts the container(div, p etc) into 3D mode, so the children appended on which will look like 3D.)
Ok, let start.
first build a simple html structure like this
Code:
<div id="flip" >
<div class="front-flipping"></div>
<div class="back-flipping"></div>
</div>small DIVs are two side of a flip card, note that the order is important: the second div is going to be "physically" at the front, while the first div is at the back.(you can define the z-index to change the layer sequences , but in this sample, I'd like to make it code-simple.)
Then, conver the container DIV into 3D
Code:
<style>
/*convert container into 3D mode*/
#flip{
-webkit-perspective:1000;
position:absolute;
top:100px;
left:200px;}
</style>also use two different colors to modify the two children DIVs
Code:
.back-flipping{
position:absolute;
top:0px;
left:0;
display:block;
width:400px;
height:300px;
background:black;
border:2px black;
}
.front-flipping{
position:absolute;
top:0px;
left:0;
display:block;
width:400px;
height:300px;
background:#006699;
border:2px black;
}
Code:
/*keyframes*/
@-webkit-keyframes flip {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}we will make the div rotate with Y forever, so we add the flip into the style of those two children DIVs
Code:
.back-flipping{
position:absolute;
top:0px;
left:0;
display:block;
width:400px;
height:300px;
background:black;
border:2px black;
-webkit-animation:flip 3s infinite linear;
-webkit-transform-style: preserve-3d;
}
.front-flipping{
position:absolute;
top:0px;
left:0;
display:block;
width:400px;
height:300px;
background:#006699;
border:2px black;
-webkit-backface-visibility: hidden;
-webkit-animation:flip 3s infinite linear;
-webkit-transform-style: preserve-3d;
}note that the -webkit-backface-visibility:hidden; is important and necessary, without which you will see both the back and front side in sametime. It is not a bug, but a bad UE looking.
check the web, it is done~
well, sometimes you dont need the DIVs to rotate forever, just change the attribute "infinite" into "1" or "2"
Full code
Code:
<html>
<head>
<style>
/*convert the container into 3D mode*/
#flip{
-webkit-perspective:1000;
position:absolute;
top:100px;
left:200px;}
/*define flipping style*/
.back-flipping{
position:absolute;
top:0px;
left:0;
display:block;
width:400px;
height:300px;
background:black;
border:2px black;
-webkit-animation:flip 3s infinite linear;
-webkit-transform-style: preserve-3d;
}
.front-flipping{
position:absolute;
top:0px;
left:0;
display:block;
width:400px;
height:300px;
background:#006699;
border:2px black;
-webkit-backface-visibility: hidden;
-webkit-animation:flip 3s infinite linear;
-webkit-transform-style: preserve-3d;
}
/*keyframes*/
@-webkit-keyframes flip {
from {-webkit-transform: rotateY(0);}
to {-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div id="flip" class="card-before" onclick="flip()">
<div class="back-flipping">
</div>
<div class="front-flipping">
</div>
</div>
</body>
</html>Thanks for reading!
Last edited by a moderator:
