Codenstuff.com: CSS 3d Flip Boxes

CSS 3d Flip Boxes

2 posts Page 1 of 1

Post Reply

Contributors

hungryhounduk
VIP - Site Partner

Posts: 2870

Joined: Mon Jul 27, 2009 11:58 am

CSS 3d Flip Boxes
hungryhounduk
Sat Jan 25, 2014 3:10 pm

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