Swiper 环形旋转木马视图切换

yuyu1214 · 发表于 2025-3-7 10:39:47

111111111111111111

前端小王 · 发表于 2025-3-11 10:32:27

1111111111111111111111111

lc171781261 · 发表于 2025-3-17 18:20:14

123122312312312

15030214610 · 发表于 2025-3-19 13:56:07

11111111111111111

lgdlgdlgd · 发表于 2025-3-19 21:40:23

好好好好好好好好好好好好好好

牛爷爷 · 发表于 2025-4-7 08:46:03

学习学习

phoenixgold · 发表于 2025-4-21 17:00:26

俺是来学习的

phoenixgold · 发表于 2025-4-21 18:48:17

本帖最后由 phoenixgold 于 2025-4-21 18:51 编辑

使用CSS样式选择器：

.slide-item {perspective:100px;perspective-origin:center center;transition:all .3s ease-in-out;transform-style:preserve-3d;}
.slide-item .child-box {transition:all .3s ease-in-out;transform:translateZ(-35px) rotateY(-10deg);}/* 全部的状态 */
.slide-center.child-box {transform:translateZ(0)}/*居中的状态*/
.slide-item :has(+ .slide-center) .child-box {transform:translateZ(-8px) rotateY(-3deg);} /* 前1个 */
.slide-center + .slide-item .child-box {transform:translateZ(-8px) rotateY(3deg);} /* 后1个 */
.slide-center + .slide-item + .slide-item .child-box {transform:translateZ(-35px) rotateY(10deg)} /* 后2个 */

CSS选择器刚好能选择前一个和后几个；

在确定中间的情况下，第一个使用全局设定，中间的前一个正好是第二个；

后一、二个依次设置……

5个的排版不用复杂的计算，用样式实现

文文佗 · 发表于 2025-4-22 16:31:28

效果很牛逼的样子

zxc1588 · 发表于 2025-4-23 10:28:23

谢谢大佬 66666666