Question

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

<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需要长度单位。

Answer 2

有很多问题。这是一个工作小提琴：http://jsfiddle.net/FK499/42/

首先，您需要告诉它将js放在<head>中，方法是将其设置为＆＃34;不包裹 - <head>＆＃34;

其次，您的功能未被}关闭。

第三，你不需要锚标记。

第四，你在最后一次转换中错过了px。

HTML：

    <div id = "menu" onclick="menu();">
                <div id = "lineOne">1</div>
                <div id = "lineTwo">1</div>
                <div id = "lineThree">1</div>
    </div>

和js：

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(10px,-10px,0)";
        }

Javascript没有使用id的某些元素

2 个答案: