[CSS3 Tutorial 2] 3D flip [CSS3 Tutorial 2] 3D flip - MacRumors Forums
Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Apr 20, 2012, 09:42 AM   #1
williamswan
macrumors newbie
 
Join Date: Apr 2012
[CSS3 Tutorial 2] 3D flip [CSS3 Tutorial 2] 3D flip

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!

Last edited by dejo; Apr 20, 2012 at 10:01 AM. Reason: Self-promotion.
williamswan is offline   0 Reply With Quote
Old Apr 20, 2012, 04:25 PM   #2
NutsNGum
macrumors 68030
 
NutsNGum's Avatar
 
Join Date: Jul 2010
Location: Glasgow, Scotland
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.
NutsNGum is offline   0 Reply With Quote
Old Apr 21, 2012, 12:37 AM   #3
williamswan
Thread Starter
macrumors newbie
 
Join Date: Apr 2012
Quote:
Originally Posted by NutsNGum View Post
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.
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
williamswan is offline   -1 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Map issue HTML5 & CSS3 JamesD95 Web Design and Development 3 Apr 16, 2014 02:57 PM
best forum/group of html5 & css3? umbilical Web Design and Development 5 Jan 25, 2013 03:18 AM
css3 corner slants not rounded AFPoster Web Design and Development 2 Dec 31, 2012 05:15 PM
CSS3 height transition tech4all Web Design and Development 0 Jul 7, 2012 05:14 PM

Forum Jump

All times are GMT -5. The time now is 08:39 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC