如何使旋转div降低周围元素的高度？

Question

我有一堆通知从上到下一个在另一个下面。 在下面的图像上显示了3个通知。当我单击关闭按钮时，它会将类collapsed应用到相应的框中，它应该使其旋转90度x轴，并在css3过渡时将其高度降低到0。

为了显示我的问题，我将中间框旋转到45度。正如您所看到的那样，盒子看起来仍然与未旋转时的高度相同，因此顶部和底部的盒子仍然保持在它们的位置上。我希望他们按照旋转度移动。

如何正确使用？