Photos Flip Css
by muthu[ Edit ] 2013-11-08 11:41:17
Flip Photos Css
On mouse hover You can flip images on either the horizontal or vertical axis using the following css and html code
---------------------------- Css Code ----------------------------
h2 { font:bold 14px Verdana, Geneva, sans-serif; margin:220px 0 0 150px; text-shadow:1px 1px #fff; }
.flip-photos .photo .front { color:#000; background:url(muthu.jpg) no-repeat; }
.flip-photos .photo .flipped { color:#000; background:url(kumar.jpg) no-repeat; }
.flip { -webkit-transform: rotateY(180deg); -moz-transform:rotateY(180deg);
-ms-transform: rotateY(180deg); transform: rotateY(180deg);
-webkit-backface-visibility:hidden; -moz-backface-visibility:hidden;
-ms-backface-visibility:hidden; backface-visibility:hidden; }
.flip-photos .photo div { position: absolute; width:100%; height:100%;
border:4px double #000; -webkit-backface-visibility: hidden;
-moz-backface-visibility:hidden; -ms-backface-visibility:hidden;
backface-visibility:hidden; }
.flip-photos .photo.top .flipped { -webkit-transform: rotateX( 180deg );
-moz-transform: rotateX( 180deg ); -ms-transform: rotateX( 180deg );
transform: rotateX( 180deg ); }
.flip-photos .photo.top:hover { -webkit-transform: rotateX( 180deg );
-moz-transform: rotateX( 180deg ); -ms-transform: rotateX( 180deg );
transform: rotateX( 180deg ); }
.flip-photos .photo { float:left; position: relative; width:250px; height:250px;
cursor: pointer; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
transform-style: preserve-3d; -webkit-transition: all 1s ease;
-moz-transition: all 1s ease; -ms-transition: all 1s ease;
transition: all 1s ease; }
---------------------------- Html Code ----------------------------
<div class="flip-photos">
<div class="photo top">
<div class="front"><h2>Muthujoo</h2></div>
<div class="flipped"><h2>Muthujoo</h2></div>
</div>
</div>
