yucca666: Flipping Content

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container.

YOUR TEXT

code :

<center>
<div class="container-card">


<div class="front">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTzfUuWs98epzxfxMVGFtBZ42zlnB18pqZwsWy3-VSb8o7jQJ4cQHvCPnhM1fCrYBI2E-GmowcglsrIyYtnPuLLutDLh6N7R04e_0xnKkUs4dADIAsri3aBQiS37JGPnPHd_6MNhFIbRU/s800/uderwear.png" /></div>

<div class="back">
_______e$$$$$$$$$$e_______
______$$$$$$$$$$$$$$______
_____d$$$$$$$$$$$$$$b_____
_____$$$$$$$$$$$$$$$$_____
____4$$$$$$$$$$$$$$$$F____
____4$$$$$$$$$$$$$$$$F____
____$$$$"_"$$$$"_"$$$$$_____
_____$$F(•??)4$$F(•??)4$$_____
_____'$F____ 4$F___4$"_____
______$$___$$$$___$$______
______4$$$$$^$$$$$P_____
_______$$$$F__4$$$$_______
________"$$$ee$$$"________
________._*$$$$F_._________
_________$_____.$_________
_________"$$$$$$"_________
__________^$$$$___________</div>

</div>

</center>

<h1 itemprop="name">
<span style="font-size: small;"><span style="font-weight: normal;"></span></span>
</h1>
<style type="text/css">
.container-card {
    position:relative;
    height:330px;
    width:530px;
    margin:20px auto;}
.container-card > div {
    position:absolute;
    left:0;
    top:0;
    width:530px;
    height:330px;
    padding:20px;
    background:#000000;
    -webkit-transition:1.5s ease-in-out;
    -moz-transition:1.5s ease-in-out;
    transition:1.5s ease-in-out;}
.container-card > div.back {
    background:#000;
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-transform:perspective(800px) rotateY(180deg);
    -webkit-transform:perspective(800px) rotateY(180deg);
    transform:perspective(800px) rotateY(180deg);}
.container-card > div.front {
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-transform:perspective(800px) rotateY(0deg);
    -webkit-transform:perspective(800px) rotateY(0deg);
    transform:perspective(800px) rotateY(0deg);
-webkit-box-shadow: 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 1px #000;
box-shadow: 1px opx 5px #000;}
.container-card:hover > div.back {
    -moz-transform:perspective(800px) rotateY(0);
    -webkit-transform:perspective(800px) rotateY(0);
    transform:perspective(800px) rotateY(0);
-webkit-box-shadow: 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 1px #000;
box-shadow: 1px opx 5px #000;}
.container-card:hover > div.front {
    -webkit-transform:perspective(800px) rotateY(-179.9deg);
    -moz-transform:perspective(800px) rotateY(-179.9deg);
    transform:perspective(800px) rotateY(-179.9deg); }
</style>