CSS 实现左右交换的效果
鞋厂的 App 有这么一个效果，而我的小伙伴刚好要做这样一个效果，于是就开始研究到底是怎么做的，Emmmm，大家都知道我平时糊设计图的功底为 0，所以好好研究了一下。：
首先布局用 flex 可以实现，而动画可以用 transform 或者 animation 实现。
这个布局第一反应是 justify-content: space-between，写了一波之后果然可以实现这个效果，但是动画该怎么定位才是大难题。
这里我们第一反应是用了 vw 这个单位，1vw 的意思是视口宽度的 1%。最简单的动画效果是用 transition 来做，变化属性是 transform，那么东京二字就应该定位在 100vw - ${x}px - ${width} 的位置。假设两侧的留白是 10px，则我们可以得出上海和东京的位置，而不需要借助 space-between。
但事实是，如果用了 transform: translateX()，那么上海即使被位移了也会占据位置，如果我们用纯 CSS 实现，那么没有办法很好的定位东京二字。
所以我们回到 flex: space-between，那么东京默认为 -10px（向右留白 10px），上海为 10px（向左留白 10px），那么运动时东京定位在 -100vw + ${x}px + ${width}，而上海定位在 100vw - ${x}px - ${width}。
而至于不需要运动的中间按钮，只要留在中间就可以了。
具体的效果见：https://jsfiddle.net/csvwolf/4pgak94t/
- 参考资料：七个你可能不了解的CSS单位
植入部分
如果您觉得文章不错，可以通过赞助支持我。
如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。
我有一个思路是利用rotateY完成
包裹元素和东京、上海都加上rotateY(180deg)就完成了交换位置
而且这个效果看起来还不错
rotateY(180deg)不行吧 ，那样虽然调转了但是字会反过来的
对 我刚开始也想到了这个=。=
字也转一下就行了，我说的是包裹元素和东京、上海两个字()都加上rotateY(180deg)
补充
rotateY的方法：https://jsfiddle.net/csvwolf/ddq7z9zj/，效果不太一样，在动画过程中会发现元素的旋转补间，如果没有 span 中的过渡效果，那么运动过程中是反向的，和原效果的平移略有差别。