div中的过渡

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

我的代码是:

  Transition  .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链接

转换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); }