Get Latest Tricks Alert Daily
Follow Readers

3D Style Rotate image with css3 that flip two sides


SHARE:

The Css3 groundbreaking features have the ability to rotate html elements in 3D Style. This 3D css3 shows how to rotate a two sided image or html elements to reveal the content on the backside. when user mouse over on the image or html element they see the flip and rotating the images.

This features come with css3 this codes work on google chrome, firefox10+, IE10+ and safari browsers simply showing backsides content from the stat with non compatible browsers

Upward Rotate 3D Flip


Demo

Css3 Code for Css3 3D Upward Rotate flip Code


div.flip{
position:relative;
width: 300px; /* Set default width of flip */
height: 250px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}

div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}

div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}

div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}


Html code for Css3 3D upwardRotate flip


<div class="flip" style="display: inline-block; margin-right: 40px">
<div class="rotate x">
<img src="YOUR IMAGE URL">
<div>
WRITE YOUR DESCRIPTION HERE. <br /><br />
<img src="YOUR IMAGE URL" style="margin:0 auto" />
</div>
</div>
</div>


Right side Rotate 3D Flip


Demo

Css3 Code for Css3 3D Right Rotate flip Code


div.flip{
position:relative;
width: 300px; /* Set default width of flip */
height: 250px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}

div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}

div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}



Html code for Css3 3D Right Rotate flip


<div class="flip" style="width: 250px; height: 200px; display: inline-block;">
<div class="rotate y">
<img src="YOUR IMAGE URL">
<img src="YOUR IMAGE URL">
</div>
</div>




SHARE:



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!

 

6 comments:

  1. Thank you for sharing such beautiful things

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. @hareesh786
      If you are going to add the code in blockquote like css code you have to encode the code by using this HTML Encoder Tool and then add to your post.

      hope you got it.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. very informative articular, Thanks for sharing this
    http://mybloggertools.com/

    ReplyDelete