所以，决定我想要旋转一些东西，因为这看起来很有趣
所以我有两个svg圆圈，一个在另一个上面绘制，然后我想旋转它，看起来它们在相同的“水平”旋转。 I.E，如果顶部（蓝色）圆圈向左旋转，它应该消失，因为它最终“在红色下面”。然而，蓝色旋转在红色顶部。这是否可以通过CSS转换实现？
这是代码，蓝色圆圈旋转得很好。本来会做一个jsfiddle，但他们不喜欢代码。应该在html文档中正常工作。
<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>