Html 三维旋转木马效果

如何在CSS3中实现3D旋转木马效果？

---

在Stack Overflow，我们喜欢旋转木马！

---

---

我们可以从众多旋转木马中选择，而且它们的制作方式都略有不同。一些使用Javascript，另一些只是纯css。既然有这么多可供选择，这里只是几个不同的样品。但是，请注意，如果需要的话，我将由您提出关于“它们是如何工作的”的任何澄清问题，因为解释每一个问题都会变得重复，有一些细微的差异。一些还包括预编译器（即LESS或SASS，以便正确工作）：

快速样本1

正文{
背景：#eee；
字体系列：arial、helvetica、无衬线字体；
保证金：50px自动；
填充：0；
}
h1{
字体系列：“Proxima Nova”，“Helvetica Neue”，无衬线；
字体大小：36px；
文本对齐：居中；
}
h3{
字体系列：“Proxima Nova”，“Helvetica Neue”，无衬线；
字体大小：22px；
字体：斜体；
颜色：#4e4e；
文本对齐：居中；
边缘底部：-100px；
}
#包装纸{
宽度：960px；
保证金：0自动；
}
#包装纸{
前景：2 500人；
-webkit透视图：2500；
宽度：800px；
保证金：200px自动0自动；
透视原点：50%150px；
-webkit透视图来源：50%150px；
过渡：透视，1s；
-o-转变：-o-透视，1s；
-moz转换：-moz透视图，1s；
-webkit转换：-webkit透视图，1s；
}
#图片：悬停{
动画播放状态：暂停；
-o-动画播放状态：暂停；
-moz动画播放状态：暂停；
-webkit动画播放状态：暂停；
}
@-webkit关键帧旋转{
从{
变换：rotateY（0）；
-o变换：rotateY（0）；
-ms变换：rotateY（0）；
-moz变换：rotateY（0）；
-webkit变换：rotateY（0）；
}
到{
变换：旋转（-360度）；
-o变换：旋转（-360度）；
-ms变换：旋转（-360度）；
-莫兹变换：旋转（-360度）；
-webkit变换：旋转（-360度）；
}
}
#形象{
保证金：0自动；
高度：300px；
宽度：400px；
变换样式：保留-3d；
-webkit变换样式：保留-3d；
动画：旋转24秒无限线性；
-moz动画：旋转24秒无限线性；
-o-动画：旋转24秒无限线性；
-webkit动画：旋转24秒无限线性；
}
.形象{
位置：绝对位置；
高度：300px；
宽度：400px；
边界半径：25px；
背景色：rgba（0,0,0,0.6）；
文本对齐：居中；
字号：20em；
颜色：#fff；
}
#image>.i1{
transform:translateZ（485px）；
-moz变换：translateZ（485px）；
-o-变换：translateZ（485px）；
-ms变换：translateZ（485px）；
-webkit转换：translateZ（485px）；
}
#image>.i2{
变换：旋转（45度）平移（485px）；
-莫兹变换：旋转（45度）平移（485px）；
-o变换：旋转（45度）平移（485px）；
-ms变换：旋转（45度）平移（485px）；
-webkit变换：旋转（45度）平移（485px）；
}
#image>.i3{
变换：旋转（90度）平移（485px）；
-莫兹变换：旋转（90度）平移（485px）；
-o变换：旋转（90度）平移（485px）；
-ms变换：旋转（90度）平移（485px）；
-webkit变换：旋转（90度）平移（485px）；
}
#图像>.i4{
变换：旋转（135度）平移（485px）；
-莫兹变换：旋转（135度）平移（485px）；
-o变换：旋转（135度）平移（485px）；
-ms变换：旋转（135度）平移（485px）；
-webkit变换：旋转（135度）平移（485px）；
}
#图像>.i5{
变换：旋转（180度）平移（485px）；
-莫兹变换：旋转（180度）平移（485px）；
-o变换：旋转（180度）平移（485px）；
-ms变换：旋转（180度）平移（485px）；
-webkit变换：旋转（180度）平移（485px）；
}
#图像>.i6{
变换：旋转（225度）平移（485px）；
-莫兹变换：旋转（225度）平移（485px）；
-o变换：旋转（225度）平移（485px）；
-ms变换：旋转（225度）平移（485px）；
-webkit变换：旋转（225度）平移（485px）；
}
#image>.i7{
变换：旋转（270度）平移（485px）；
-莫兹变换：旋转（270度）平移（485px）；
-o变换：旋转（270度）平移（485px）；
-ms变换：旋转（270度）平移（485px）；
-webkit变换：旋转（270度）平移（485px）；
}
#image>.i8{
变换：旋转（315度）平移（485px）；
-莫兹变换：旋转（315deg）平移（485px）；
-o变换：旋转（315deg）平移（485px）；
-ms变换：旋转（315度）平移（485px）；
-webkit变换：旋转（315deg）平移（485px）；
}
img{
边界半径：25px；

在Chrome或Safari中查看
（悬停在上方以暂停）

我喜欢这个答案……它有很多种选择……谢谢@jbutler483