如何轉換列內的內容

Question

夥計們。目前，我正在構建React Weather應用程序（http://powerful-headland-90755.herokuapp.com/#/weather）

我想讓底部的那些列翻轉以顯示背面的內容。我遇到了一個問題，即這個動畫需要子元素被絕對定位，這就是爲什麼列自己變得非常低的高度。我有語義UI網格，並且想要懸停在這些方塊上。

任何有關如何不使網格變形而使其變形的建議？將很樂意接受任何幫助或想法！

Answer 1

一種技術是製作一個佔用空間的div，並將其中的實際卡片渲染到絕對位置。然後，您可以在沒有網格項目更改大小的情況下對其進行設置

<div style={{width: '10em', height: '25em'}}> 
    <div style={{ 
    position: 'absolute', top: 0, right: 0, left: 0, bottom: 0, 
    transform: something, 
    }}> 
    content here 
    </div> 
</div> 

_{內聯樣式用於示例目的。}