i have 1 css animation
#sun { position: absolute; width: 55px; height: 55px; border: 1px solid red; background-color: orange; opacity: 0.9; border-radius: 100%; text-align: center; animation: round 3s infinite linear; } @keyframes round { { transform: rotate(0deg); } { transform: rotate(360deg) } }<p id="sun">sun</p> <p id="demo">1</p>if value of demo id change depend on sun rotate. should do? example demo initial value 1at time sun move 25%. value of demo increase 2.5. sun rotate 1 full circle value of demo 10. how can using jquery /javascript
please me.
use jquery code:
$(document).ready(function(){ setinterval( function(){ var rotateval = getrotationdegrees( $("#sun") ); var percentrotate = rotateval / 360 * 10; $("#demo").text( percentrotate.tofixed(2) ); }, 250 ) });//document ready function getrotationdegrees(obj) { var matrix = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); if(matrix !== 'none') { var values = matrix.split('(')[1].split(')')[0].split(','); var = values[0]; var b = values[1]; var angle = math.round(math.atan2(b, a) * (180/math.pi)); } else { var angle = 0; } return (angle < 0) ? angle + 360 : angle; } this code running function every 250 millseconds, retrieves rotate angle of #sun , updates #demo text accordingly. can modify interval per need.
