Ok so this is really getting frustrated for me here, first of all if my question framing is wrong please do edit it(if you think so)...and ok, as my screens will explain you, but still I would like that my element should stay in a specific shape and not to rotate along with the animation, am missing something really stupid thing?What I Want :
What's Happening :
jQuery Solutions Are Welcomed (But I Would Love CSS3 Solutions)\[quote\] Note: Don't go on the element's opacity, 1 is made using Paint and other with Photoshop, What Matter's Is Square Should Rotate As Square Shape\[/quote\]HTML\[code\]<div><span></span></div>\[/code\]CSS\[code\]@keyframes round_round { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}div { width: 50px; height: 50px; animation: round_round 3s linear infinite; margin: 50px auto 0; transform-origin: 50% 150px; background-color: #8FC1E0;}span { display: inline-block; margin: 5px; height: 5px; width: 5px; background: #c00000;}\[/code\]Demo