Html 使用CSS3在2x2象限设计上设置打开平铺的动画

所以我有一个四象限布局的设计。非常类似，但我希望它是响应和调整它的容器。另外，需要注意的是，它不仅仅是那个例子中的图像。对我来说，为每个瓷砖的开口设置动画是很重要的，这样用户可以看到瓷砖扩展到覆盖他的3个伙伴，并占据容器的全部大小

这是一个代码笔，基本上是我到目前为止所拥有的- 我试着制作活动的磁砖

.tile.active {
 position: absolute;
 top: 0;
 left: 0;
}

但这对动画没有帮助，因为它从左上角开始，而不是从实际位置开始。任何洞察或任何其他类似功能的例子都会非常有用。提前谢谢你

这里有一个例子。z索引在活动类上非常大，因为转换也会影响z索引，这意味着从初始值到新值需要0.3秒。这反过来意味着，如果zindex是0和1，那么您将在末尾看到重叠

---

由于动画的性质，我认为js就足够了，但是您可以根据需要修改它

，如果您希望在悬停在它上面时它会增长，那么此代码将起作用

#换行{
宽度：230px；
高度：220px；
}
#第一组{
显示：内联块；
位置：绝对位置；
顶部：0px；
左：0px；
高度：100px；
宽度：100px；
背景色：红色；
填充：0px；
边际：0px；
过渡：高度.5s，宽度.5s；
z指数：1；
}
#第1部分：悬停{
宽度：200px；
高度：200px；
}
#第二组{
显示：内联块；
位置：绝对位置；
顶部：0px；
左：100px；
高度：100px；
宽度：100px；
背景颜色：绿色；
填充：0px；
边际：0px；
}
#第三组{
显示：内联块；
位置：绝对位置；
顶部：100px；
左：0px；
高度：100px；
宽度：100px；
背景颜色：蓝色；
填充：0px；
边际：0px；
}
#第四组{
显示：内联块；
位置：绝对位置；
顶部：100px；
左：100px；
高度：100px；
宽度：100px；
背景颜色：黄色；
填充：0px；
边际：0px；
}

第一组

第2组

第3组

第4组