css 3d轮播图效果

在react上 实现 的 css 3d 轮播效果

效果图

tip
效果图 正转是 点击切换 反转是模拟触摸切换

思路

1. css 用到 perspective transform-style 开启3d 效果
2. 图片 平均分布在 360度 上 （图片数量与圆的半径 需注意 出现图片重叠可调整半径）
3. 轮播切换 通过设置整体角度实现 需注意3d中心点
   

css

.carousel{
    
    .wrapper{
        /*设置井深、透视*/
        perspective: 500px;
        transform-style: preserve-3d;
        // transform: rotateX(-5deg);
    }
    .swiper1{
        width: 200px;