如何转换列内的内容答案

【问题标题】：How to transform content inside a column如何转换列内的内容
【发布时间】：2017-08-26 15:04:35
【问题描述】：

伙计们。目前我正在构建 React Weather 应用程序 (http://powerful-headland-90755.herokuapp.com/#/weather)

我想让底部的那些列翻转以在背面显示内容。我遇到了一个问题，这个动画需要绝对定位子元素，这就是为什么列本身变得非常低的原因。我有语义 ui 网格，并且想在悬停时翻转这些正方形。

关于如何在进行变换时不破坏网格的任何建议？很高兴收到任何帮助或想法！

【问题讨论】：

标签： css reactjs css-animations semantic-ui

【解决方案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>

_{用于示例目的的内联样式。}

【讨论】：