最近，網上流傳著一張大廈地板塌陷的照片。事實上，這不是真實事件，而是利用CSS3技術制作的虛擬效果。

在CSS3中，有一個非常有趣的屬性transform，它可以改變一個元素的形狀、位置和大小。而利用其中的一個函數scale，我們可以實現這種地板塌陷的效果。

.floor {
background: #858585;
width: 200px;
height: 200px;
perspective: 500px;
transform-style: preserve-3d;
animation: floor-collapse 2s linear infinite forwards;
}
@keyframes floor-collapse {
0% {
transform: scale(1, 1, 1);
}
50% {
background: #cc0000;
transform: scale(0.5, 0.5, 1);
}
100% {
background: #000;
transform: scale(0.2, 0.2, 1) rotateX(90deg);
}
}

在上面的代碼中，我們首先定義了一個類.floor，它表示地板的樣式，包括顏色、寬度、高度、透視效果和transform的preserve-3d模式。

接著，我們使用@keyframes定義一個名為floor-collapse的動畫。其中，0%表示動畫開始時的狀態，50%表示動畫進行到一半的狀態，100%表示動畫結束時的狀態。通過transform屬性和scale函數，我們讓地板從原始大小逐漸縮小，同時變換背景顏色和旋轉方向。

最后，在類.floor中添加animation屬性，指定動畫名字floor-collapse、時間2秒、動畫的運動方式線性、播放次數無限循環、最終狀態為動畫結束后的狀態。

實際上，這只是CSS3技術中的一個小小應用。但它向我們展示了CSS3的強大之處，讓人們驚嘆于CSS3的無限可能性。