Html 如何在transform中构建纯css旋转木马

寻找纯css旋转木马，它已经开始了一点，但仍然不确定是否可能。该代码片段的目的是将图像从左向右移动，并在使用

背面可见性：隐藏的帮助下向左隐藏时进行
变换：旋转（0.25圈）
；-）然后向左移动图像，然后变换：旋转（0.25圈）

。希望问题清楚

是否可以使用当前片段构建css旋转木马？

@关键帧旋转{
50% {
变换：旋转（5度）旋转（0.5圈）；
}
100% {
变换：rotateX（-5度）rotateY（1圈）；
}
}
身体{
保证金：0；
溢出：隐藏；
背景：#000；
}
身体，容器{
位置：绝对位置；
宽度：100%；
身高：100%；
透视图：700px；
}
身体，容器，旋转木马{
位置：绝对位置；
左：50%；
最高：50%；
宽度：140px；
高度：97px；
左边距：-70px；
利润上限：-48.5px；
变换样式：保留-3d；
变换：rotateX（-5度）rotateY（0）；
动画：转20秒无限线性；
}
身体。容器。转盘。滑梯{
位置：绝对位置；
宽度：140px；
高度：97px；
用户选择：无；
}
主体。容器。旋转木马。幻灯片：第n个子项（1）{
变换：旋转（0度）平移（280像素）；
}
主体。容器。旋转木马。幻灯片：第n个子（2）{
变换：旋转（36度）平移（280像素）；
}
主体。容器。旋转木马。幻灯片：第n个孩子（3）{
变换：旋转（72度）平移（280像素）；
}
主体。容器。旋转木马。幻灯片：第n个孩子（4）{
变换：旋转（108度）平移（280像素）；
}
身体。容器。旋转木马。幻灯片：第n个孩子（5）{
变换：旋转（144度）平移（280像素）；
}
身体。容器。旋转木马。幻灯片：第n个孩子（6）{
变换：旋转（180度）平移（280像素）；
}
身体。容器。旋转木马。幻灯片：第n个孩子（7）{
变换：旋转（216度）平移（280像素）；
}
身体。容器。旋转木马。幻灯片：第n个孩子（8）{
变换：旋转（252deg）平移（280px）；
}
身体。容器。旋转木马。幻灯片：第n个孩子（9）{
变换：旋转（288deg）平移（280px）；
}
身体。容器。旋转木马。幻灯片：第n个孩子（10）{
变换：旋转（324deg）平移（280px）；
}

*{
保证金：0；
填充：0；
}
html{
背景色：#eefbf8；
背景图像：径向梯度（圆形，hsla（0,0%，100%，.1），hsla（0,0%，0%，.75）），
线性梯度（左侧，透明50%，hsla（0,0%，0%，0.01）50%）；
背景位置：50%75%，50%50%；
背景重复：不重复，重复；
背景尺寸：150%150%，3em 3em；
字体大小：100%；
最小高度：100%；
}
/**********/
/*滑块*/
/**********/
.滑块{
背景色：#fff；
盒影：插入0.2px hsla（0,0%，0%，0.2），
0 3px 1px hsla（0,0%，100%，0.75），
0-1px1px2pHSLA（0,0%，0%，.1）；
身高：18.75em；
左：50%；
保证金：-9.875em-13em；
填充：.5em；
位置：绝对位置；
最高：50%；
宽度：25em；
}
/*框架*/
.滑块：之前{
背景色：#22130c；
底部：-2.5em；
盒影：插入0 1px 1px 1px hsla（0,0%，100%，0.2），
插图0-2px1pHSLA（0,0%，0%，0.4），
0 5px 50px高强度低合金（0,0%，0%，0.25），
0.20px 20px-15px高强度低合金（0,0%，0%，0.2），
0.30px 20px-15px高强度低合金（0,0%，0%，0.15），
40px20px-15pxHSLA（0,0%，0%，0.1）；
内容：''；
左：-2.5em；
位置：绝对位置；
右：-2.5em；
顶部：-2.5em；
z指数：-1；
}
/*垫子*/
.滑块：之后{
背景色：#fff5e5；
底部：-1.5em；
盒影：0.2×1×hsla（0,0%，100%，.2），
0-1px 1px 1px hsla（0,0%，0%，.4），
插入0.2×3×1×hsla（0,0%，0%，.2），
插图0 4px 3px 1px hsla（0,0%，0%，.2），
插入0.6px 3px 1px hsla（0,0%，0%，0.1）；
内容：''；
左：-1.5em；
位置：绝对位置；
右：-1.5em；
顶部：-1.5em；
z指数：-1；
}
/*幻灯片*/
李先生{
盒影：0-1px02pxHSLA（0,0%，0%，0.03）；
列表样式：无；
位置：绝对位置；
}
.滑块输入{
显示：无；
}
/*航行*/
.滑块标签{
背景色：#111；
背景图像：线性梯度（透明，hsla（0,0%，0%，0.25））；
边框：2米实心透明；
底部：.5em；
边界半径：100%；
光标：指针；
显示：块；
高度：.5em；
左：24em；
不透明度：0；
位置：绝对位置；
过渡：.25s；
宽度：.5em；
可见性：隐藏；
z指数：10；
}
.滑块标签：在{
边界半径：100%；
底部：-.2米；
方框阴影：插图0.2em#111，
插图0 2px 2px#000，
0 1px 1px hsla（0,0%，100%，0.25）；
内容：''；
左：-.2米；
位置：绝对位置；
右图：-.2米；
顶部：-.2米；
}
.滑块：悬停标签{
不透明度：1；
能见度：可见；
}
.滑块输入：选中+标签{
背景色：#fff；
}
.滑块：悬停li:n子（1）标签{
左：.5em；
}
.滑块：悬停li:n子（2）标签{
左：2米；
}
.滑块：悬停li:n子（3）标签{
左：3.5em；
}
.滑块：悬停li:n子（4）标签{
左：5em；
}
/*图像*/
.滑块img{
身高：18.75em；
不透明度：0；
过渡：.25s；
宽度：25em；
垂直对齐：顶部；
可见性：隐藏；
}
.滑块li输入：选中~img{
不透明度：1；
能见度：可见；
z指数：10；
}
​











*{
保证金：0；
填充：0；
}
html{
背景色：#eefbf8；
背景图像：径向梯度（圆形，hsla（0,0%，100%，.1），hsla（0,0%，0%，.75）），
线性梯度（左侧，透明50%，hsla（0,0%，0%，0.01）50%）；
背景位置：50%75%，50%50%；
背景重复