div中的过渡

我在同一行有三个不同的盒子。 我希望在框内单击时在这些框中进行转换。 现在，当我点击任何一个框时，它将从左向右扩展并获得全宽，其他框在下一行堆叠。 我想要的是当我点击红色框时，该框必须从左向右展开，与剩余的框重叠。 类似地，当我单击绿色框时，它必须从其两侧扩展并在左侧和右侧重叠两个框并获得全宽。 类似地，当我点击蓝色框时，它必须从左侧展开并填充与剩余框重叠的宽度。 谁能帮帮我吗？

我的代码是：

    .box { width:30%; height: 200px; margin: 10px; float:left; } #first { background-color: red; } #second { background-color: green; } #third { background-color: blue; }    
 
 
 
 
   $(function() { var containerWidth = $(".container").width(); $(".box").click(function() { var id = $(this).attr("id"); $("#"+id).animate({width: "100%"}); }); });    

Jsfiddle链接

Answer 1

转换transform: scale() ，这将允许元素扩展到其他元素。 您可以通过js为该属性分配一个类来进行转换，您可以在纯CSS中执行此操作。 并且由于每个元素的宽度为20％，因此转换scaleX(5)将为100％。 并使用transform-origin来改变元素从哪个方向扩展。

 var containerWidth = $(".container").width(); $(".box").click(function() { var id = $(this).attr("id"); $(this).addClass('scale'); }); 

 .box { width:20%; height: 200px; margin: 10px; float:left; transition: transform .5s; transform-origin: 0 0; } #first { background-color: red; } #second { background-color: green; transform-origin: center center; } #third { background-color: blue; transform-origin: 100% 0; } .scale { transform: scaleX(5); }