css - 使用具有通用 x 值的变换的 CSS 轮播

Question

我正在尝试使用 CSS 转换/转换创建一个简单的轮播。我也试图做到这一点，而不给轮播中的每个项目它自己的变换/过渡规则

即：我想要：

 .item.active {
     -webkit-transform: translate(0,0);
     -webkit-transition: all 2s ease-in-out;
 }

代替 ：

 .item1.active {
     -webkit-transform: translate(100px,0);
     -webkit-transition: all 2s ease-in-out;
 }

 .item2.active {
     -webkit-transform: translate(200px,0);
     -webkit-transition: all 2s ease-in-out;
 }

在这里演示 => jsFiddle

我开始觉得这是不可能的；有人做过类似的事情吗？除了我应该使用的转换/转换之外，还有样式规则吗？

编辑：看起来这不可能......