Freelance Jobs

Friday, 24 January 2014

ayaz shah

Ayaz shah in keenjhar lake.

AYAZ SHAH



Css3 flip animation

Css3 flip animation complete code is following. Copy paste this code and enjoy amazing css3 flip.
<style type="text/css">
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

border: 1px solid #ccc;
}

.flip-container:hover .flipper,
  .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 260px;
height: 260px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

.front {
background:#000000;;
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
transform: rotateY(180deg);

background: #f8f8f8;
}

.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;

-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(arrow_one.png) 0 0 no-repeat;
}

.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}

.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
  font-family: arial;
  line-height: 2em;
}
</style>
</head>

<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <span class="name">David Walsh</span>
    </div>
    <div class="back">
      <div class="back-logo"></div>
      <div class="back-title">@davidwalshblog</div>
      <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
    </div>
  </div>
</div>