CSS3旋转木马手绘插画 |ie不支持css3怎么办

.carousel {
width: 600px;
height: 400px;
position: relative;
margin: 100px auto;
perspective: 1000px;
}
.carousel .slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transition: transform 1s;
opacity: 0.6;
}
.carousel .slide.active {
transform: rotateY(0) translateZ(0);
opacity: 1;
}
.carousel .slide.prev {
transform: rotateY(-75deg) translateZ(260px);
}
.carousel .slide.next {
transform: rotateY(75deg) translateZ(260px);
}
.carousel .slide.prevprev {
transform: rotateY(-150deg) translateZ(160px);
}
.carousel .slide.nextnext {
transform: rotateY(150deg) translateZ(160px);
}

在代码中，大家使用了CSS3的transition和transform来实现旋转木马效果。首先定义了一个.carousel类，将其设置为一个矩形的盒子，在中心设置了perspective属性，用于3D视觉效果。接着大家定义了.slide类，将其设置为绝对定位，并用transform-style保留3D效果，尚未设置旋转和位移效果。

下面分别定义了.active、.prev、.next、.prevprev、.nextnext五个类，分别代表当前选中的图片、前方两张和后方两张图片。大家为它们分别添加了不同的rotateY（沿y轴旋转）和translateZ（z轴方向上的位移）属性，使它们在3D视觉效果下呈现出前方、后方、左斜45度、右斜45度以及正中心的效果。同时大家使用了transform过渡效果，让图片在旋转和位移时呈现出平滑的动态效果。

这样大家就实现了一个简单的CSS3旋转木马素材。如果您想要让图片和动画效果更加独特和精美，可以考虑在图片上添加手绘元素，例如细节装饰和线条描摹等。这将让您的旋转木马插画更加具有艺术感和张力，为您的网站或应用增添视觉上的吸引力。