用CSS实现上下颠倒的图案 [动画演示] [#4持续更新中.....]

题目图案

本文是CSSBattle #4 Ups n Downs， 实现以下上下颠倒的图案。

主要使用的CSS属性是:

1. flex
2. transform
3. translateY

CSSBattle 是一个使用 HTML 和 CSS 实现目标图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。

我仅仅选择实现 ~100%图案的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。

很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。

解决方案动画演示