JSFiddle - React, Tailwind, and code Playground
by blogsfunda
HTML
<script> $(function() { var tot = $(".img_c").length; var stat = deg = 10; var rotate = ""; var frame, mozframe, webkitframe; $("img").each(function(index) { $(this).css({ "transform": "rotate("+deg+"deg)", "-moz-transform": "rotate("+deg+"deg)", "-webkit-transform": "rotate("+deg+"deg)", "-o-transform": "rotate("+deg+"deg)" });
rotate = "100% {" + "transform: rotate(360deg);" + "-moz-transform: rotate(360deg);" + "-webkit-transform: rotate(360deg);" + "-o-transform: rotate(360deg);" + "} ";
var imgclass = parseInt(index+1); frame = " @keyframe anim" + imgclass + " { " + rotate + "}"; mozframe = " @-moz-keyframes anim" + imgclass + " { " + rotate + "}"; webkitframe = " @-webkit-keyframes anim" + imgclass + " { " + rotate + "}"; $('<style> '+ frame + mozframe + webkitframe + ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' + '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' + '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }' +'</style>').appendTo('head');
deg = deg + stat; }); }); </script> <style> body { background: #fff url('wood_pattern.png') repeat top right; } .content { margin: 0 auto; padding: 100px; } img { margin: 10px; padding: 20px; background: #fff; -moz-box-shadow: 0px 0px 3px #d3d3d3; -webkit-box-shadow: 0px 0px 3px #d3d3d3; box-shadow: 0px 0px 3px #000000; position: absolute; } </style>
<br /><div...