CSS3 transform实现图片旋转木马3D浏览效果

最新推荐文章于 2024-06-25 14:34:30 发布

原创最新推荐文章于 2024-06-25 14:34:30 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

javascript 同时被 3 个专栏收录

28 篇文章

订阅专栏

css3

13 篇文章

订阅专栏

代码

8 篇文章

订阅专栏

本文介绍如何使用CSS3实现3D翻转效果的图片轮播，通过为不同图片设置rotateY角度和translateZ距离，使它们在三维空间中均匀分布。点击事件则会改变容器的rotateY值，实现图片的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先DOM结构：舞台>容器>图片

为舞台设置样式：perspective: 800px;

为容器设置样式：transform-style: preserve-3d;position: relative;transition: transform .8s; 元素本身style属性设置为transform: rotateY(0deg);为后面容器旋转获得初始值

为图片设置样式：position: absolute;

为每个图片设置样式（此时又九张图片）：img:nth-child(1) { transform: rotateY( 0deg ) translateZ(195.839px); }
img:nth-child(2) { transform: rotateY( 40deg ) translateZ(195.839px); }
   img:nth-child(3) { transform: rotateY( 80deg ) translateZ(195.839px); }
   img:nth-child(4) { transform: rotateY( 120deg ) translateZ(195.839px); }
   img:nth-child(5) { transform: rotateY( 160deg ) translateZ(195.839px); }
     img:nth-child(6) { transform: rotateY( 200deg ) translateZ(195.839px); }
   img:nth-child(7) { transform: rotateY( 240deg ) translateZ(195.839px); }
     img:nth-child(8) { transform: rotateY( 280deg ) translateZ(195.839px); }
   img:nth-child(9) { transform: rotateY( 320deg ) translateZ(195.839px); }

rotateY的值为360/图片的个数，translateZ的值为（图片宽度/2）/ tan（rorateY/2）

最后，在js代码中改变容器的rotateY的值：代码如下：

var stage = document.getElementById("stage");
stage.addEventListener('click',function() {
var rotateY = this.style.webkitTransform;

// 由左向右：rotateY-40
var newPos = parseInt(rotateY)-40;
this.style.webkitTransform = 'rotateY(' + newPos + 'deg)';
});

PS：css，js代码没有进行浏览器兼容处理，请自行添加

效果图：