WebSoftPrograms: Create an awesome Css3 Animated Flip Boxes in simple steps without Javascript

Hi, Guys! Are you want to become a good website designer? thats why you are always ready to learn anything, related to Web Designing like Html, Css, Javascript etc?

So, thats why I have created a new program & sharing with you, this is an awesome "Css3 Animated Flip Boxes" without javascript in just some simple steps. If you face any problem you can just scroll down & comment to ask or click to "Download Project Source" for Download.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>Html5 - Css3 Flip Boxes - No Javascript!!!</h1>
<div id="main">

<!--Flip Box 1-->

<div class="Horizontal-flip-wrapper">
<div class="Horizontal-flipper">
<div class="Horizontal-flipper-front">
<div class="Horizontal-flipper-front-text">
<h2>Horizontal (X)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Horizontal-flipper-back">
<div class="Horizontal-flipper-back-text">
<h2>Horizontal (X)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>

<!--Flip Box 2-->

<div class="Vertical-flip-wrapper">
<div class="Vertical-flipper">
<div class="Vertical-flipper-front">
<div class="Vertical-flipper-front-text">
<h2>Vertical (Y)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Vertical-flipper-back">
<div class="Vertical-flipper-back-text">
<h2>Vertical (Y)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>

<!--Flip Box 3-->

<div class="Horizontal-flip-wrapper">
<div class="Horizontal-flipper">
<div class="Horizontal-flipper-front">
<div class="Horizontal-flipper-front-text">
<h2>Horizontal (X)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Horizontal-flipper-back">
<div class="Horizontal-flipper-back-text">
<h2>Horizontal (X)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>

<!--Flip Box 4-->

<div class="Vertical-flip-wrapper">
<div class="Vertical-flipper">
<div class="Vertical-flipper-front">
<div class="Vertical-flipper-front-text">
<h2>Vertical (Y)<br/>Front View</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</div>
<div class="Vertical-flipper-back">
<div class="Vertical-flipper-back-text">
<h2>Vertical (Y)<br/>Back View</h2>
<p><img src="" width="50" /><!--Your can put you own image.--></p>
<p><a href="https://www.facebook.com/websoftprograms" target="new">Please follow us on facebook for more programs & tutorials.</a></p>
</div>
</div>
</div>
</div>


<div class="clear"></div>
</div>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color: #ccc;
}

.clear{
 clear:both;
}
#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
#main{
 width:950px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}

/*--FOR HORIZONTAL FLIP--*/

.Horizontal-flip-wrapper {
 perspective: 1000px;
 float:left;
 margin:5px;
}
.Horizontal-flip-wrapper:hover .Horizontal-flipper{
 transform: rotateY(180deg);
}
.Horizontal-flip-wrapper, .Horizontal-flipper-front, .Horizontal-flipper-back {
 width: 225px;
 height: 175px;
 border-radius:25px;
}
.Horizontal-flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}
.Horizontal-flipper-front, .Horizontal-flipper-back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}
.Horizontal-flipper-front {
 background-color:#f60;
 z-index: 2;
 transform: rotateY(0deg);
}
.Horizontal-flipper-front-text{
 padding:10px;
}
.Horizontal-flipper-front-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#333;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Horizontal-flipper-front-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px;
}
.Horizontal-flipper-back {
 background-color:#333;
 transform: rotateY(180deg);
}
.Horizontal-flipper-back-text{
 padding:10px;
}
.Horizontal-flipper-back-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#F60;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Horizontal-flipper-back-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px
}
.Horizontal-flipper-back-text p a{
 color:#fff;
 text-decoration:none;
}
.Horizontal-flipper-back-text p a:hover{
 color:#f60;
 text-decoration:underline;
}
/*--FOR VERTICAL FLIP--*/

.Vertical-flip-wrapper {
 perspective: 1000px;
 float:left;
 margin:5px;
}
.Vertical-flip-wrapper .Vertical-flipper{
 transform-origin: 100% 87.5px; /* half of height */
}
.Vertical-flip-wrapper:hover .Vertical-flipper{
 transform: rotateX(-180deg);
}
.Vertical-flip-wrapper, .Vertical-flipper-front, .Vertical-flipper-back {
 width: 225px;
 height: 175px;
 border-radius:25px;
}
.Vertical-flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}
.Vertical-flipper-front, .Vertical-flipper-back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}
.Vertical-flipper-front {
 background-color:#333;
 z-index: 2;
 transform: rotateY(0deg);
}
.Vertical-flipper-front-text{
 padding:10px;
}
.Vertical-flipper-front-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#F60;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Vertical-flipper-front-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px
}
.Vertical-flipper-back {
 background-color:#f60;
 transform: rotateX(180deg);
}
.Vertical-flipper-back-text{
 padding:10px;
}
.Vertical-flipper-back-text h2{
 font-family:Georgia, "Times New Roman", Times, serif;
 color:#333;
 font-weight:lighter;
 text-align:center;
 margin-bottom:10px;
}
.Vertical-flipper-back-text p{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#fff;
 text-align:center;
 margin-bottom:5px;
}
.Vertical-flipper-back-text p a{
 color:#fff;
 text-decoration:none;
}
.Vertical-flipper-back-text p a:hover{
 color:#333;
 text-decoration:underline;
}

DOWNLOAD PROJECT SOURCE

Create an awesome Css3 Animated Flip Boxes in simple steps without Javascript

No comments:

Post a Comment