span.content1{
transform-origin: center bottom;
-webkit-transform-origin: center bottom;
transform:rotate3d(1,1,1,60deg);
-webkit-transform:rotate3d(1,1,1,60deg);
}
span.content1 i{
transform:scale3d(0.01,0.01,1);
-webkit-transform:scale3d(0.01,0.01,1);
}
span.content2{
transform-origin: center bottom;
-webkit-transform-origin: center bottom;
transform:translate3d(0,20px,0);
-webkit-transform:translate3d(0,20px,0);
}
span.content2 i{
transform:translate3d(0,10px,0);
-webkit-transform:translate3d(0,10px,0);
}
span.content3{
transform-origin: center bottom;
-webkit-transform-origin: center bottom;
transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
-webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
}
span.content3 i{
transform:translate3d(0,-2px,0);
-webkit-transform:translate3d(0,-2px,0);
}
span.content4{
transform:translate3d(0,-12px,0);
-webkit-transform:translate3d(0,-12px,0);
}
span.content4 i{
transform:translate3d(0,12px,0);
-webkit-transform:translate3d(0,12px,0);
}
span.content5{
transform:scale(0.01) translate3d(0,10px,0);
-webkit-transform:scale(0.01) translate3d(0,10px,0);
}
span.content5 i{
transform:translate3d(0,20px,0);
-webkit-transform:translate3d(0,20px,0);
}
</style>
</head>
<body>
<p
class
=
"da"
>
<ul>
<li>
<a href=
"#"
>nomalse<span
class
=
"content1"
><i
class
=
"fa fa-camera"
></i></span></a>
</li>
<li>
<a href=
"#"
>palse<span
class
=
"content2"
><i
class
=
"fa fa-bicycle"
></i></span></a>
</li>
<li>
<a href=
"#"
>mate<span
class
=
"content3"
><i
class
=
"fa fa-bus"
></i></span></a>
</li>
<li>
<a href=
"#"
>script<span
class
=
"content4"
><i
class
=
"fa fa-ship"
></i></span></a>
</li>
<li>
<a href=
"#"
>css3<span
class
=
"content5"
><i
class
=
"fa fa-plane"
></i></span></a>
</li>
</ul>
</p>
</body>
</html>