在react上 实现 的 css 3d 轮播效果
效果图
tip
效果图 正转是 点击切换 反转是模拟触摸切换
思路
- css 用到 perspective transform-style 开启3d 效果
- 图片 平均分布在 360度 上 (图片数量与圆的半径 需注意 出现图片重叠可调整半径)
- 轮播切换 通过设置整体角度实现 需注意3d中心点
css
.carousel{
.wrapper{
/*设置井深、透视*/
perspective: 500px;
transform-style: preserve-3d;
// transform: rotateX(-5deg);
}
.swiper1{
width: 200px;
height: 100px;
border:1px solid #ccc;
position: relative;
margin:100px auto 50px