将CSS移动转换应用于具有“transform”属性的元素

我想将CSS移动转换应用到具有

transform

属性的元素

过渡前：

一个
两个
三

过渡后：

两个
三
一个

CSS:

.list>li{
变换：skewX（15度）；
变换原点：左下角；
}

我尝试应用

transition:transform1s

，然后

skewX

也被重置并重新应用

此处的视频示例：

---

如何将转换仅应用于运动，而不应用于形状变换？

您可以使用CSS动画执行以下操作

.container{
背景#f7f8f9；
显示器：flex；
}
.货柜组{
宽度：40px；
高度：100px；
背景#fcc700；
利润率：0.4px；
动画：旋转线性1.2秒；
//动画：旋转线性1s无限；
}
@关键帧旋转{
从{
转换：translateX（-50px）；
}
到{
变换：translateX（50px）skewX（-15度）；
}
}

A.
B