View difference between Paste ID: SD4JJ1z4 and zDRsEyeN

 
 
 <!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">
-  var degs = 360/$("#test").children().size();
+
-  for (var i=1;i<=$("#test").children().size();++i)
+
-  {
+function Rotate(tt)
-    $("#test > div:nth-child("+i+")").css("transform", "rotate("+(i*degs)+"deg)");
+
   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");
 });
-#test{
+
 <style>
 *
-animation:mymove 5s linear infinite;
+
--webkit-animation:mymove 5s linear infinite; /*Safari and Chrome*/
+
 margin: 0;
-#test > div
+
 }
 .abs {
 position: absolute;
 }
-position:absolute;
+.cont {
 display: table-cell;
 text-decoration: none;
 vertical-align: middle;
-@keyframes mymove
+
 .cont, .cont * {
 height: 150px;
 width: 150px;
 }
 .cont * {
-@-webkit-keyframes mymove /*Safari and Chrome*/
+line-height: normal;
 }
 .cont>div {
 margin: auto;
 }
 .cont > div > div {
 text-align: center;
 position: absolute;
 }
-<div id="test">
+#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>