So, decided I wanted to spin some things, because that seemed like fun
So I have two svg circles, one drawn on top of the other, I then want to spin it so that it looks like they spin on the same "level". I.E, if the top (blue) circle spins towards the left, it should disappear as it ends up going "underneath" the red. However, the blu spins on top of the red. Is this something that is even possible with CSS transform?
Here is the code, and the blue circle spins nicely. Would have done a jsfiddle, but they did not like the code. Should work fine in a html document though.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100"
height="100"
viewBox="0 0 100 100"
id="circles"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="10to-logo.svg">
<defs
id="defs4860" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="4.04"
inkscape:cx="58.358364"
inkscape:cy="41.115203"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="120"
inkscape:window-height="160"
inkscape:window-x="0"
inkscape:window-y="1"
inkscape:window-maximized="1" />
<metadata
id="metadata4863">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="10Logo"
inkscape:groupmode="layer"
id="circles"
transform="translate(0,0)">
<circle id="c1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<circle id="c2" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</g>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var logo = document.getElementById("circles");
var timeSec = logo.getElementById("c1");
var impactSec = logo.getElementById("c2")
//-webkit-transform: translate3d(0,0,0);
impactSec.style.transformOrigin = "50% 50%";
impactSec.style.mozTransformOrigin = "50% 50%";
window.onload = function start() {
spinner();
}
function spinner() {
//var num = 0, style = document.getElementById('container').style;
var angle = 0;
window.setInterval(function () {
// increase by num 1, reset to 0 at 4
angle = (angle + 5) % 360;
impactSec.style.transform = "rotateY("+angle+"deg)";
impactSec.style.mozTransform = "rotateY("+angle+"deg)";
}, 50); // repeat forever, polling every 0.5 seconds
}
//impactSec.style.display='none';
//logo.style.display='none';
</script>
