StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I know this answer is already answered but i found a great example of this, which requires less frames so better performance.</p> <hr /> <p>The core structure you want to create is actually the same(almost) when you create a clock. </p> <p>Where you expect this basic HTML structure:</p> <pre><code><div id="clock"> <div id="hand"> <div id="topHand"></div> </div> </div> </code></pre> <p>I used the <a href="http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/" rel="nofollow noreferrer">center tricks of css-tricks</a> to center the "hand" excacly in the left middle of the clock element.</p> <p>Where we just animate the hand around with the <code>transform: rotateZ</code>.</p> <h2><a href="http://jsfiddle.net/w9aX6/2/" rel="nofollow noreferrer">Here an example</a></h2> <p>You can transform the clock so it gives the illusion it has been rotated in 3D, thus looks like a oval. You can do this with the <code>-webkit-transform: rotateX() rotateY();</code> <em>Note that this defines your oval form</em></p> <p>Now we need to get rid of the illusion it is 3D.</p> <p>You just negetate the <code>rotate</code> properties on your box:</p> <pre><code>@-webkit-keyframes rotateFix { from { -webkit-transform: rotateX(90deg) rotateY(0deg); } to { -webkit-transform: rotateX(90deg) rotateY(-360deg); } } </code></pre> <p>Do not forget to use <code>-webkit-transform-style: preserve-3d;</code> when using this.</p> <h2><a href="http://jsfiddle.net/w9aX6/4/" rel="nofollow noreferrer">jsFiddle</a></h2> <hr /> <p>An slighty other example i made, where i used the full width and height instead of a stroke:</p> <h2><a href="http://jsfiddle.net/KTQZS/embedded/result/" rel="nofollow noreferrer">jsFiddle</a></h2> <p><em>I made the path-box semi-transparent so you can see the shape and the actual movement</em></p> <p>source: <a href="https://stackoverflow.com/questions/12757323/how-to-make-an-atom-like-animation-using-css3-animations">How to make an atom like animation using CSS3 animations?</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload