<center><div id="portfolio">
<ul class="portfolio-grid">
<li>
<center>
<li>
<a href="#" class="animated flipInX">
<img src="http://placehold.it/240x120/9931c4/FFFFFF" alt="img01"/>
</a>
</li>
<div>
<li>
<a href="#" class="animated flipInX">
<img src="http://placehold.it/240x120/31c431/FFFFFF" alt="img01"/>
</a>
</li>
<div>
<li>
<a href="#" class="animated flipInX">
<img src="http://placehold.it/240x120/c0392b/FFFFFF" alt="img01"/>
</a>
</li>
</ul>
</div>
<style>
body {
height: 100%;
background-color: #f2f2f2;
}
.portfolio-grid {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
width: 100%;
}
.portfolio-grid li {
display: inline-block;
margin: 5px 5px 5px 5px;
vertical-align: top;
width:212px;
}
.portfolio-grid li > a,
.portfolio-grid li > a img {
width: 100%;
border: none;
outline: none;
display: block;
position: relative;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.portfolio-grid li > a img:hover {
border-radius: 50%;
z-index: 9999;
}
/******************************************
Animate.CSS By Dan Eden
******************************************/
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
</center>
حمایت شدهThanks :
