Javascript没有使用id的某些元素

Question

我试图让3行做一些事情:第1行旋转45度,有些翻译第1行不透明度0第1行旋转-45deg和一些翻译

JS小提琴

<a href = "#"><div id = "menu" onclick="menu()">
              <div id = "lineOne">1</div>
              <div id = "lineTwo">1</div>
              <div id = "lineThree">1</div>
              </div>
</a>

function menu()
{
    //Show Differnet Button
    document.getElementById('lineOne').style.WebkitTransform = "rotate(45deg) translate3d(10px,10px,0)";
    document.getElementById('lineTwo').style.opacity = ".3";
    document.getElementById('lineThree').style.WebkitTransform = "rotate(-45deg) translate3d(10,-10px,0)";
}

#lineOne, #lineTwo, #lineThree, #line4, #line5, #line6
{
    margin-top: 6px;
    margin-left: 30px;
    position: relative;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 7px !important;
    background: black;
    color: rgba(1,1,1,0) !important;
}

我在JS Fiddle上的代码是上面的,我得到的唯一结果是不透明度,第一个旋转和翻译.没有其他的.我完全忽略了其余的事情.我能做什么？

Answer 1

你px在变换中缺少一个.

document.getElementById('lineThree')
        .style.WebkitTransform = "rotate(-90deg) translate3d(10px,-10px,0)";

translate3d 需要长度单位.