CSS 3d Flip Boxes

2 posts Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

CSS 3d Flip Boxes
hungryhounduk
Hey Guys and Gals

Here is a Tutorial on how you can create amazing CSS Animation 3D Flip Boxes.

1. Create a Basic HTML 5 Document
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div>

</div>
</body>
</html>
Then between the <style> tags add
Code: Select all
.flip3D{}
Then Between the Curly Brackets add { width:240px; height:200px; margin:10px; float:left; }

So it matches the code below
Code: Select all
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
Next we add our Class:
Code: Select all
<div class="flip3D">
add this between the <body></body>tags

Now we define our Class for our Boxes
add this below <div class="flip3D">
Code: Select all
  <div class="back">Box 1 - Back</div>
Then copy it and paste it below the other and change Back to Front
Code: Select all
<div class="front">Box 1 - Front</div>
</div>
Copy and paste it 2 more times below the code above, we are having 3 boxes
but with this method you can create as many as you like.
Just change the boxes to Box 2 and Box 3, so it matches the code below.
Code: Select all
<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
  <div class="back">Box 2 - Back</div>
  <div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
  <div class="back">Box 3 - Back</div>
  <div class="front">Box 3 - Front</div>
</div>
Next we add our flip3D Animation, with color,height and Border Radius
Plus our Transition time .5s (you can adjust these to slow or speed up the Effect)
Copy this and add it below .flip3D{ width:240px; height:200px; margin:10px; float:left; }
so your Code now looks like this below.
Code: Select all
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
	position:absolute;
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background:#FC0; width:240px; height:200px; border-radius: 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -webkit-transform .5s linear 0s;
	transition: transform .5s linear 0s;
}
Copy and Paste it again below the last one and Change it to
Back and Change the rotateY to 180deg
here we set Backface-Visibility to hide the back as it animates
Code: Select all
.flip3D > .back{
	position:absolute;
	-webkit-transform: perspective( 600px ) rotateY( 180deg );
	transform: perspective( 600px ) rotateY( 180deg );
	background: #80BFFF; width:240px; height:200px; border-radius: 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: -webkit-transform .5s linear 0s;
	transition: transform .5s linear 0s;
Now we add the Mouse Hover on the Front Box
Paste this below
Code: Select all
}
.flip3D:hover > .front{
	-webkit-transform: perspective( 600px ) rotateY( -180deg );
	transform: perspective( 600px ) rotateY( -180deg );
Now we add the Mouse Hover on the Back Box
Copy and paste the code above and Paste this below it, and change
it to Back and the rotateY to 0deg
Code: Select all
}
.flip3D:hover > .back{
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
}
And Hey Presto!! we are done!

Change the Text >Box 1 - Back< + >Box 1 - Front<>Box 2 - Back< + >Box 2 - Front<>Box 3 - Back< + >Box 3 - Front<between the Tags to whatever you like on each one.

like this (Example)
Code: Select all
<div class="back">Codenstuff is the Best Site in the World</div>
 <div class="front">Codenstuff Rocks my World!</div>

 <div class="back">Tons of Tutorials at Codenstuff.com</div>
 <div class="front">Learn NEW Skills@codenstuff.com</div>

 <div class="back">Dont forget to Register</div>
 <div class="front">Join the Codenstuff.com Community</div>
Also you can change the code to include Images and Text

Just use the Imagination

Credits for this go to http://www.developphp.com/
I just came across it and followed the Tutorial

HTML 5 Doc in attachment :)

Enjoy

Chris
You do not have the required permissions to view the files attached to this post.
Image
User avatar
Dummy1912
VIP - Donator
VIP - Donator
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm

Re: CSS 3d Flip Boxes
Dummy1912
nice work :) thanks for sharing ;)
visit us on:


http://www.softpedia.com/get/System/Lau ... -Run.shtml
Check it out ! http://www.softpedia.com/publisher/I-A- ... 90017.html
Check it out ! http://www.softpedia.com/get/Desktop-En ... lock.shtml
2 posts Page 1 of 1
Return to “Tutorials”