单击容器 div 时，如何旋转两个 div 以形成 X? [英] How can I rotate two divs to form an X when I click the container div?

问题描述

这是我现在所拥有的:代码

这是 html

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

我想使用 jQuery 旋转 line1 和 line3 以形成 X 并使 line2 在您单击容器 div (#box) 时消失.由于动画，我喜欢 jQuery 的想法，但欢迎任何其他想法.

解决方案

你可以像这个

.rotateL{变换:旋转(45度)translateX(10px)；-webkit-transform:rotate(45deg) translateX(10px);变换原点:30%；-webkit-transform-origin:30%;}.rotateR{变换:旋转(-45度)translateY(10px)；-webkit-transform:rotate(-45deg) translateY(10px);变换原点:22%；-webkit-transform-origin:22%;}

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.

解决方案

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%;
}

这篇关于单击容器 div 时，如何旋转两个 div 以形成 X?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！