css3 - Confusion with a CSS transform having multiple translate properties -
in the following demo (webkit only), not understand why there double translates , rotates 1 transform property in css part.
transform: translate(100px, 100px) rotate(45deg) translate(-100px, -100px) rotate(-45deg); this weird example. , why circle move that?
full demo:
// note: change red signifies start of // animation // allows elements accessed in clean way var circle = document.getelementbyid('circle'), button = document.getelementbyid('button'); // gets element show current percentage var result = document.getelementbyid('result'), // current position of circle around path // in percent in reference original totalcurrentpercent = 0, // percent of circle around path in // percent in reference latest origin currentpercent = 0; // updates percent change latest origin var showpercent = window.setinterval(function() { if(currentpercent < 100) { currentpercent += 1; } else { currentpercent = 0; } result.innerhtml = currentpercent; }, 39); // runs @ rate based on animation's // duration (milliseconds / 100) // checks see if specified rule within // of stylesheets found in document; // returns animation object if function findkeyframesrule(rule) { var ss = document.stylesheets; (var = 0; < ss.length; ++i) { (var j = 0; j < ss[i].cssrules.length; ++j) { if (ss[i].cssrules[j].type == window.cssrule.webkit_keyframes_rule && ss[i].cssrules[j].name == rule) { return ss[i].cssrules[j]; } } } return null; } // replaces animation based on percent // when activated , other hard coded // specifications function change(anim) { // obtains animation object of specified // animation var keyframes = findkeyframesrule(anim), length = keyframes.cssrules.length; // makes array of current percent values // in animation var keyframestring = []; for(var = 0; < length; ++) { keyframestring.push(keyframes[i].keytext); } // removes % values array // getclosest function can perform calculations var keys = keyframestring.map(function(str) { return str.replace('%', ''); }); // updates current position of circle // used in calculations totalcurrentpercent += currentpercent; if(totalcurrentpercent > 100) { totalcurrentpercent -= 100; } // self explanatory variables if read // description of getclosest var closest = getclosest(keys); var position = keys.indexof(closest), firstpercent = keys[position]; // removes current rules of specified // animation for(var = 0, j = keyframestring.length; < j; ++) { keyframes.deleterule(keyframestring[i]); } // turns percent when activated // corresponding degree of circle var multiplier = firstpercent * 3.6; // creates rules set new // origin path based on approximated // percent of animation when activated , // increases diameter of new circular path keyframes.insertrule("0% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 0) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 0) + "deg); background-color:red; }"); keyframes.insertrule("13% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 45) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 45) + "deg); }"); keyframes.insertrule("25% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 90) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 90) + "deg); }"); keyframes.insertrule("38% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 135) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 135) + "deg); }"); keyframes.insertrule("50% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 180) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 180) + "deg); }"); keyframes.insertrule("63% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 225) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 225) + "deg); }"); keyframes.insertrule("75% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 270) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 270) + "deg); }"); keyframes.insertrule("88% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 315) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 315) + "deg); }"); keyframes.insertrule("100% { -webkit-transform: translate(100px,100px) rotate(" + (multiplier + 360) + "deg) translate(-100px,-100px) rotate(" + (multiplier + 360) + "deg); }"); // shows circle again circle.style.display = "inherit"; // sets animation newly specified rules circle.style.webkitanimationname = anim; // resets approximate animation percent counter window.clearinterval(showpercent); currentpercent = 0; showpercent = self.setinterval(function() { if(currentpercent < 100) { currentpercent += 1; } else { currentpercent = 0; } result.innerhtml = currentpercent; }, 39); } // attatches change function button's // onclick function button.onclick = function() { // removes animation new 1 can set circle.style.webkitanimationname = "none"; // temporarily hides circle circle.style.display = "none"; // initializes change function settimeout(function () { change("rotate"); }, 0); } // gets animation's closest % value based on // approximated % found below function getclosest(keyframe) { var curr = keyframe[0]; var diff = math.abs (totalcurrentpercent - curr); (var val = 0, j = keyframe.length; val < j; val++) { var newdiff = math.abs(totalcurrentpercent - keyframe[val]); if (newdiff < diff) { diff = newdiff; curr = keyframe[val]; } } return curr; } // check out http://zachsaucier.com/ more of projects@-webkit-keyframes rotate { 0% { -webkit-transform:translate(100px, 100px) rotate(0deg) translate(-100px, -100px) rotate(0deg); background-color:red; } 13% { -webkit-transform:translate(100px, 100px) rotate(45deg) translate(-100px, -100px) rotate(-45deg); } 25% { -webkit-transform:translate(100px, 100px) rotate(90deg) translate(-100px, -100px) rotate(-90deg); } 38% { -webkit-transform:translate(100px, 100px) rotate(135deg) translate(-100px, -100px) rotate(0deg); } 50% { -webkit-transform:translate(100px, 100px) rotate(180deg) translate(-100px, -100px) rotate(-180deg); } 63% { -webkit-transform:translate(100px, 100px) rotate(225deg) translate(-100px, -100px) rotate(225deg); } 75% { -webkit-transform:translate(100px, 100px) rotate(270deg) translate(-100px, -100px) rotate(-270deg); } 88% { -webkit-transform:translate(100px, 100px) rotate(315deg) translate(-100px, -100px) rotate(315deg); } 100% { -webkit-transform:translate(100px, 100px) rotate(360deg) translate(-100px, -100px) rotate(-360deg); } } #circle { height: 50px; width: 50px; border-radius:25px; background-color: teal; -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-name:"rotate"; -webkit-animation-iteration-count: infinite; position:absolute; left:30%; top:20%; } #button { width:130px; background:teal; }<div id="circle"></div> <div id='button'>changeanimation</div> <div id='result'></div>
first of all, value of transform property list of <transform-function>. if list of <transform-function> provided, net effect if each transform function had been specified separately in order provided. example:
<div style="transform: translate(100px, 100px) rotate(45deg) translate(-100px, -100px) rotate(45deg)"> </div> is functionally equivalent to:
<div style="transform: translate(100px, 100px)"> <div style="transform: rotate(45deg)"> <div style="transform: translate(-100px, -100px)"> <div style="transform: rotate(45deg)"> </div> </div> </div> </div> as implementation of 2 translates , rotates 1 transform property, done circular animation.
speaking briefly, first translate defines center of circular path, first rotate defines angle x-axis, second translate defines radius, second rotate make figure spin around on it’s axis.
please @ the article understand in more details on simple example.
Comments
Post a Comment