[CSS3 Tutorial 2] 3D flip [CSS3 Tutorial 2] 3D flip

Discussion in 'Web Design and Development' started by williamswan, Apr 20, 2012.

  1. williamswan, Apr 20, 2012
    Last edited by a moderator: Apr 20, 2012

    williamswan macrumors newbie

    Joined:
    Apr 19, 2012
    #1
    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:

    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>
    
    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
    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;
    }
    
    and then, define the animation(remember it in [CSS3 tutorial 1]?)

    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!
     
  2. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #2
    Interesting.

    I did something with 3D a while ago for a website but they decided not to use it as it wasn't achievable across all browsers. The perspective changes if you mouse-over.

    http://bit.ly/I98ZqL

    If the mods regard this post as self-promotion feel free to delete, it's not intended as such.
     
  3. williamswan thread starter macrumors newbie

    Joined:
    Apr 19, 2012
    #3
    You are right, man. 3D CSS is a bit early to use at the stage, but why not learn about it?

    have a gud day
     

Share This Page