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>