Javascript 在执行CSS转换时控制Z索引或Z位置
所以，我决定旋转一些东西，因为那看起来很有趣 我有两个svg圆圈，一个画在另一个上面，然后我想旋转它，使它看起来像是在同一个“级别”上旋转。也就是说，如果顶部（蓝色）的圆圈向左旋转，它应该消失，因为它最终会“在”红色的下面。然而，蓝色在红色的顶部旋转。这在CSS转换中是可能的吗 这是代码，蓝色的圆圈旋转得很好。可能会做一个JSFIDLE，但他们不喜欢代码。但在html文档中应该可以正常工作Javascript 在执行CSS转换时控制Z索引或Z位置,javascript,css,svg,Javascript,Css,Svg,所以，我决定旋转一些东西，因为那看起来很有趣 我有两个svg圆圈，一个画在另一个上面，然后我想旋转它，使它看起来像是在同一个“级别”上旋转。也就是说，如果顶部（蓝色）的圆圈向左旋转，它应该消失，因为它最终会“在”红色的下面。然而，蓝色在红色的顶部旋转。这在CSS转换中是可能的吗 这是代码，蓝色的圆圈旋转得很好。可能会做一个JSFIDLE，但他们不喜欢代码。但在html文档中应该可以正常工作 <svg xmlns:dc="http://purl.org/dc/elements
<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>
image/svg+xml
var logo=document.getElementById（“圆圈”）；
var timeSec=logo.getElementById（“c1”）；
var impactSec=logo.getElementById（“c2”）
//-webkit转换：translate3d（0,0,0）；
impactSec.style.transformOrigin=“50%50%”；
impactSec.style.mozTransformOrigin=“50%50%”；
window.onload=函数开始（）{
旋转器（）；
}
函数微调器（）{
//var num=0，style=document.getElementById（'container'）.style；
var角=0；
window.setInterval（函数（）{
//增加数值1，在4处重置为0
角度=（角度+5）%360；
impactSec.style.transform=“旋转（“+角度+”度）”；
impactSec.style.mozTransform=“rotateY（“+角度+”度）”；
}，50）；//永远重复，每0.5秒轮询一次
}
//impactSec.style.display='none'；
//logo.style.display='none'；