How can I rotate two divs to form an X when I click the container div?

问题

Here's what I have now: code

this is the html

<div id="box">
    <div id="line1" class="line"></div>
    <div id="line2" class="line"></div>
    <div id="line3" class="line"></div>
</div>

I would like to use jQuery to rotate line1 and line3 to form an X and make line2 disappear when you click the container div (#box). I like the idea of jQuery because of Animation, but any other ideas are welcome.

回答1:

You can do something like This

.rotateL{
    transform:rotate(45deg) translateX(10px);
    -webkit-transform:rotate(45deg) translateX(10px);
    transform-origin:30%;
    -webkit-transform-origin:30%;
}

.rotateR{
    transform:rotate(-45deg) translateY(10px);
    -webkit-transform:rotate(-45deg) translateY(10px);
    transform-origin:22%;
    -webkit-transform-origin:22%;
}

来源：https://stackoverflow.com/questions/23996045/how-can-i-rotate-two-divs-to-form-an-x-when-i-click-the-container-div