Untitled



<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function Rotate(tt)
{
  var degs = 360/$(tt).children().size();
  for (var i=1;i<=$(tt).children().size();++i)
 {
   $(tt+" > div:nth-child("+i+")").css("transform", "rotate("+(i*degs)+"deg)");
  }
};
$(document).ready(function(){
  Rotate("#test1");
  Rotate("#test2");
});
</script>
<style>
*
{
padding: 0;
margin: 0;
border: none;
}
.abs {
position: absolute;
}
.cont {
display: table-cell;
text-decoration: none;
vertical-align: middle;
}
.cont, .cont * {
height: 150px;
width: 150px;
}
.cont * {
line-height: normal;
}
.cont>div {
margin: auto;
}
.cont > div > div {
text-align: center;
position: absolute;
}
#test1, #test1 > div {
height: 130px;
width: 130px;
font-family: 'Black Ops One', cursive;
font-size: 0.9em;
text-shadow: 0 0 10px;
}
#test2, #test2 > div {
height: 100px;
width: 100px;
font-family: 'Black Ops One', cursive;
font-size: 0.8em;
text-shadow: 0 0 10px;
}
#test1 {
animation:right 10s linear infinite;
-webkit-animation:right 10s linear infinite; /*Safari and Chrome*/
}
#test2 {
animation:left 11s linear infinite;
-webkit-animation:left 3s linear infinite; /*Safari and Chrome*/
}

@keyframes right
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@keyframes left
{
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
@-webkit-keyframes right /*Safari and Chrome*/
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes left /*Safari and Chrome*/
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-360deg);}
}
</style>
</head>
<body>

<div class="abs">
<div class="cont" style="background: url('http://projectcode.zzl.org/Download/../Image/Logo/Logo_PM.png') no-repeat scroll center center transparent;">
<div id="test1">
<div>P</div>
<div>r</div>
<div>o</div>
<div>j</div>
<div>e</div>
<div>c</div>
<div>t</div>
<div> </div>
<div>c</div>
<div>o</div>
<div>d</div>
<div>e</div>
<div> </div>
<div>P</div>
<div>r</div>
<div>o</div>
<div>j</div>
<div>e</div>
<div>c</div>
<div>t</div>
<div> </div>
<div>c</div>
<div>o</div>
<div>d</div>
<div>e</div>
<div> </div>
</div>
</div>
</div>

<div class="abs">
<div class="cont">
<div id="test2">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>0</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>0</div>
<div>1</div>
<div> </div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>0</div>
<div>0</div>
<div>1</div>
<div>0</div>
<div>0</div>
<div>1</div>
<div> </div>
</div>
</div>
</div>
</body>
</html>