长方体3D轮播图（CSS3实现）

效果图：

1.png

2.png

注意点：

• 为了保证各个界面的字都是正立的，应先旋转再平移。
• 如果不使用背景色，使用图片时一定要设置图片的宽高，否则图片间有间隙。
• 近大远小的效果是在旋转的元素的父元素加 perspective: 500px;
• 展示3D效果是在旋转元素的css中加transform-style: preserve-3d;
• 可以如该种方法先画出正方体，再拉伸为长方体；也可以设置宽高时直接设为长方形。

代码如下：

    
    

    



    

        
1
        
2
        
3
        
4