javascript - 进行 CSS transformY 时控制 Z-index 或 Z 位置

Question

所以，我决定要旋转一些东西，因为那看起来很有趣

所以我有两个 svg 圆圈，一个绘制在另一个圆圈之上，然后我想旋转它，使它们看起来像是在同一“水平”上旋转。即，如果顶部(蓝色)圆圈向左旋转，它应该会消失，因为它最终会“在”红色下方。然而，蓝色旋转在红色之上。这甚至可以通过 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>

Answer 1

不幸的是，SVG 规范不支持 css z-index。可以找到更多信息in this answer