5种3D图片切换效果

原创 已于 2025-06-27 15:21:05 修改 · 532 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #css3

于 2025-05-01 15:35:47 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5种3D图片切换效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: #f5f5f5;
            color: #333;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #444;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .slider-container {
            margin-bottom: 50px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h2 {
            margin-bottom: 15px;
            color: #555;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        /* 通用滑块样式 */
        .slider {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            perspective: 1000px;
        }
        
        .slider img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.8s ease;
        }
        
        .slider-nav {
            text-align: center;
            margin-top: 15px;
        }
        
        .slider-nav button {
            padding: 8px 15px;
            margin: 0 5px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .slider-nav button:hover {
            background: #45a049;
        }
        
        /* 效果1: 3D翻转 */
        #slider1 {
            perspective: 1000px;
        }
        
        #slider1 img {
            transform-style: preserve-3d;
            backface-visibility: hidden;
        }
        
        #slider1 img:not(.active) {
            transform: rotateY(180deg);
            opacity: 0;
        }
        
        #slider1 img.active {
            transform: rotateY(0deg);
            opacity: 1;
        }
        
        /* 效果2: 3D立方体 */
        #slider2 {
            perspective: 1200px;
        }
        
        #slider2 .slider-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        
        #slider2 img {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.9;
        }
        
        /* 效果3: 3D卡片堆叠 */
        #slider3 {
            perspective: 1500px;
        }
        
        #slider3 .slider-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }
        
        #slider3 img {
            position: absolute;
            width: 90%;
            height: 90%;
            left: 5%;
            top: 5%;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            transform-origin: center center -200px;
            transition: transform 0.8s;
        }
        
        /* 效果4: 3D旋转木马 */
        #slider4 {
            perspective: 2000px;
        }
        
        #slider4 .slider-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        
        #slider4 img {
            position: absolute;
            width: 60%;
            height: 80%;
            left: 20%;
            top: 10%;
            opacity: 0.8;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        /* 效果5: 3D翻页 */
        #slider5 {
            perspective: 1200px;
        }
        
        #slider5 .slider-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }
        
        #slider5 img {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-origin: left center;
            transition: transform 1s;
            box-shadow: -5px 5px 10px rgba(0,0,0,0.2);
        }
        
        .credit {
            text-align: center;
            margin-top: 30px;
            color: #777;
            font-size: 14px;
        }
        
        .credit a {
            color: #4CAF50;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>JS+CSS3实现五种3D图片切换效果</h1>
        
        <!-- 效果1: 3D翻转 -->
        <div class="slider-container">
            <h2>效果1: 3D翻转效果</h2>
            <div class="slider" id="slider1">
                <img src="https://picsum.photos/800/400?random=1" alt="图片1" class="active">
                <img src="https://picsum.photos/800/400?random=2" alt="图片2">
                <img src="https://picsum.photos/800/400?random=3" alt="图片3">
                <img src="https://picsum.photos/800/400?random=4" alt="图片4">
            </div>
            <div class="slider-nav">
                <button onclick="changeSlide('slider1', 'prev')">上一张</button>
                <button onclick="changeSlide('slider1', 'next')">下一张</button>
            </div>
        </div>
        
        <!-- 效果2: 3D立方体 -->
        <div class="slider-container">
            <h2>效果2: 3D立方体效果</h2>
            <div class="slider" id="slider2">
                <div class="slider-inner">
                    <img src="https://picsum.photos/800/400?random=5" alt="图片1">
                    <img src="https://picsum.photos/800/400?random=6" alt="图片2">
                    <img src="https://picsum.photos/800/400?random=7" alt="图片3">
                    <img src="https://picsum.photos/800/400?random=8" alt="图片4">
                </div>
            </div>
            <div class="slider-nav">
                <button onclick="rotateCube('slider2', 'prev')">上一张</button>
                <button onclick="rotateCube('slider2', 'next')">下一张</button>
            </div>
        </div>
        
        <!-- 效果3: 3D卡片堆叠 -->
        <div class="slider-container">
            <h2>效果3: 3D卡片堆叠效果</h2>
            <div class="slider" id="slider3">
                <div class="slider-inner">
                    <img src="https://picsum.photos/800/400?random=9" alt="图片1" style="transform: rotateY(0deg) translateZ(0px); z-index: 4;">
                    <img src="https://picsum.photos/800/400?random=10" alt="图片2" style="transform: rotateY(60deg) translateZ(-100px); z-index: 3;">
                    <img src="https://picsum.photos/800/400?random=11" alt="图片3" style="transform: rotateY(120deg) translateZ(-100px); z-index: 2;">
                    <img src="https://picsum.photos/800/400?random=12" alt="图片4" style="transform: rotateY(180deg) translateZ(-100px); z-index: 1;">
                </div>
            </div>
            <div class="slider-nav">
                <button onclick="rotateStack('slider3', 'prev')">上一张</button>
                <button onclick="rotateStack('slider3', 'next')">下一张</button>
            </div>
        </div>
        
        <!-- 效果4: 3D旋转木马 -->
        <div class="slider-container">
            <h2>效果4: 3D旋转木马效果</h2>
            <div class="slider" id="slider4">
                <div class="slider-inner">
                    <img src="https://picsum.photos/800/400?random=13" alt="图片1" style="transform: rotateY(0deg) translateZ(300px);">
                    <img src="https://picsum.photos/800/400?random=14" alt="图片2" style="transform: rotateY(90deg) translateZ(300px);">
                    <img src="https://picsum.photos/800/400?random=15" alt="图片3" style="transform: rotateY(180deg) translateZ(300px);">
                    <img src="https://picsum.photos/800/400?random=16" alt="图片4" style="transform: rotateY(270deg) translateZ(300px);">
                </div>
            </div>
            <div class="slider-nav">
                <button onclick="rotateCarousel('slider4', 'prev')">上一张</button>
                <button onclick="rotateCarousel('slider4', 'next')">下一张</button>
            </div>
        </div>
        
        <!-- 效果5: 3D翻页 -->
        <div class="slider-container">
            <h2>效果5: 3D翻页效果</h2>
            <div class="slider" id="slider5">
                <div class="slider-inner">
                    <img src="https://picsum.photos/800/400?random=17" alt="图片1" style="transform: rotateY(0deg); z-index: 4;">
                    <img src="https://picsum.photos/800/400?random=18" alt="图片2" style="transform: rotateY(180deg); z-index: 3;">
                    <img src="https://picsum.photos/800/400?random=19" alt="图片3" style="transform: rotateY(180deg); z-index: 2;">
                    <img src="https://picsum.photos/800/400?random=20" alt="图片4" style="transform: rotateY(180deg); z-index: 1;">
                </div>
            </div>
            <div class="slider-nav">
                <button onclick="flipPage('slider5', 'prev')">上一张</button>
                <button onclick="flipPage('slider5', 'next')">下一张</button>
            </div>
        </div>
        
        <div class="credit">

        </div>
    </div>

    <script>
        // 效果1: 3D翻转
        function changeSlide(sliderId, direction) {
            const slider = document.getElementById(sliderId);
            const images = slider.querySelectorAll('img');
            let activeIndex = 0;
            
            // 找到当前活动图片的索引
            images.forEach((img, index) => {
                if (img.classList.contains('active')) {
                    activeIndex = index;
                }
            });
            
            // 移除所有active类
            images.forEach(img => img.classList.remove('active'));
            
            // 计算新索引
            if (direction === 'next') {
                activeIndex = (activeIndex + 1) % images.length;
            } else {
                activeIndex = (activeIndex - 1 + images.length) % images.length;
            }
            
            // 添加active类
            images[activeIndex].classList.add('active');
        }
        
        // 效果2: 3D立方体
        let cubeRotation = 0;
        function rotateCube(sliderId, direction) {
            const sliderInner = document.getElementById(sliderId).querySelector('.slider-inner');
            
            if (direction === 'next') {
                cubeRotation -= 90;
            } else {
                cubeRotation += 90;
            }
            
            sliderInner.style.transform = `rotateY(${cubeRotation}deg)`;
            
            // 更新图片位置
            const images = sliderInner.querySelectorAll('img');
            images.forEach((img, index) => {
                const angle = (index * 90) + cubeRotation;
                img.style.transform = `rotateY(${angle}deg) translateZ(300px)`;
            });
        }
        
        // 初始化立方体
        document.addEventListener('DOMContentLoaded', function() {
            const sliderInner = document.querySelector('#slider2 .slider-inner');
            const images = sliderInner.querySelectorAll('img');
            
            images.forEach((img, index) => {
                const angle = index * 90;
                img.style.transform = `rotateY(${angle}deg) translateZ(300px)`;
            });
        });
        
        // 效果3: 3D卡片堆叠
        let stackRotation = 0;
        function rotateStack(sliderId, direction) {
            const images = document.getElementById(sliderId).querySelectorAll('img');
            
            if (direction === 'next') {
                stackRotation += 60;
            } else {
                stackRotation -= 60;
            }
            
            images.forEach((img, index) => {
                const angle = (index * 60) + stackRotation;
                img.style.transform = `rotateY(${angle}deg) translateZ(-100px)`;
                img.style.zIndex = (4 - index) % 4;
            });
        }
        
        // 效果4: 3D旋转木马
        let carouselRotation = 0;
        function rotateCarousel(sliderId, direction) {
            const sliderInner = document.getElementById(sliderId).querySelector('.slider-inner');
            
            if (direction === 'next') {
                carouselRotation -= 90;
            } else {
                carouselRotation += 90;
            }
            
            sliderInner.style.transform = `rotateY(${carouselRotation}deg)`;
        }
        
        // 效果5: 3D翻页
        let currentPage = 0;
        function flipPage(sliderId, direction) {
            const images = document.getElementById(sliderId).querySelectorAll('img');
            const totalPages = images.length;
            
            if (direction === 'next' && currentPage < totalPages - 1) {
                images[currentPage].style.transform = 'rotateY(180deg)';
                images[currentPage + 1].style.transform = 'rotateY(0deg)';
                currentPage++;
            } else if (direction === 'prev' && currentPage > 0) {
                images[currentPage].style.transform = 'rotateY(180deg)';
                images[currentPage - 1].style.transform = 'rotateY(0deg)';
                currentPage--;
            }
            
            // 更新z-index
            images.forEach((img, index) => {
                img.style.zIndex = totalPages - index;
            });
        }
    </script>
</body>
</html>

ziblog
关注
3D图片切换（带倒影）
12-03
带倒影的3D旋转图片切换控件！
3d图片旋转切换.zip
07-05
3d图片旋转切换是一款支持设置自动播放、时间、是否悬停鼠标时暂停，支持文字、图片，还可变更样式，JS里有内置的样式，可恢复重置其他样式。
3D图片切换
AnitaSun的博客
11-18 329
这个专栏里的所有代码都是从GitHub上copy过来的 前端特效存档 同时添加了自己的一些理解，包括思路分析和复杂代码的解释 创这个专栏的目的也是为了督促自己每天学一个小特效，巩固JavaScript的基本语法知识，希望自己可以坚持下去 这个专栏适合有一些html、css基础，学过JavaScript基本的语法，想巩固的小可爱们。 每天一更开始~~ 咱们一起努力，哦耶~ ????????????????????????????????????????????????
23种网页图片切换方式实战汇总
最新发布
weixin_31715353的博客
11-16 241
回顾整篇文章，你会发现，图片切换的本质，其实是信息传递效率与情感连接强度的平衡。淡入淡出是为了降低认知负荷；3D翻转是为了增强记忆锚点；拼图互动是为了激发参与欲；景深滚动是为了讲述时间故事。每一帧动画，都是在和用户进行无声对话。所以，下次当你写的时候，不妨多想一步：👉 我希望用户感受到的是惊喜？是流畅？还是探索的乐趣？毕竟，技术只是工具，真正的魔法，藏在用户体验的细节里 ✨本文还有配套的精品资源，点击获取。
3d图片切换（css3帧动画）
weixin_30565327的博客
12-08 359
效果带抖动翻转隐藏，使用帧动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text...
3d图片切换组件
weixin_30809173的博客
05-02 157
3d图片切换效果如下： 一、要想完成这个效果，首先需要思考哪些东西： 　　1.整体的dom布局. 　　2.过渡动画效果：缩放 　　3.原理：在做切换的时候，动态的改变了各个图片的样式，从而可以有切换的效果。 二、dom布局： 　　 <div class="box"> <div class="list"> ...
精选资源
WpfEffect.图片切换3D过渡效果.rar
06-13
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中实现炫酷的3D图片切换效果。WPF是Microsoft开发的一种强大的UI框架，它提供了丰富的图形和媒体功能，让我们能够创建出极具视觉吸引力的应用...
精选资源
12种炫酷CSS3图片切换过渡效果
12-29
在实际应用中，这些效果可以通过组合使用，或者与其他CSS3特性（如响应式设计、Flexbox或Grid布局）相结合，来创造出更多富有创意的图片切换效果。在提供的压缩包中，`index.html`应该是示例代码的入口，`compass`...
jquery+css3实现图片3D切换效果
06-12
在本项目中，"jquery+css3实现图片3D切换效果"是一个利用现代Web技术创建交互式用户体验的实例。这个项目结合了JavaScript库jQuery和CSS3的强大功能，为用户提供了一种创新的方式来展示和切换图片，特别是在网页设计...
jQuery+HTML5 3D折页图片切换特效
06-09
"jQuery+HTML5 3D折页图片切换特效"就是这样一种技术，它结合了JavaScript库jQuery和HTML5的强大功能，创造出立体感十足的3D图像翻转效果，用于图片的展示和切换。这个特效适用于制作引人入胜的焦点图或产品展示区，...
CSS3实现的3D图片切换效果
06-11
现在CSS3、html5已经快速的普及，做web前端的童鞋们大展身手的时候到了；...这款为大家推荐的国外引进的3D图片切换效果，共有五种不同的展现方式； 提醒：请在较高浏览器版本下浏览，因为它是CSS3的
基于threejs的3D爆炸碎片轮播图特效
12-12
这是一款基于threejs的3D爆炸碎片轮播图特效。该特效使用threejs来制作轮播图在切换时的爆炸特效，图片爆炸成碎片，然后组合为下一张新的图片，效果非常炫酷。
13种酷炫的html5 3D图片切换代码
weixin_30917213的博客
07-21 3087
jQuery 3D图片叠加css3翻转图片切换特效 html5图片3d切换幻灯片轮播特效代码 jquery 3d响应式幻灯片带左右按钮的图片滑动切换效果 jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果 html5 css3 3D动画制作手机界面3D叠加突出动画效果 html5 3D图片网格布局点击图片3D动画弹出大图文字信息 css3...
HTML&CSS：3D图片切换效果
weixin_52814911的博客
06-09 941
这个3D画廊展示页面采用了Three.js库实现3D渲染效果，主要特点包括： 核心功能：圆形画布展示3D图像，用户点击缩略图即可切换显示内容 视觉设计： 采用圆形画布+双重边框设计 边框应用渐变颜色效果 缩略图使用卡片式框架设计 技术实现： 使用Three.js处理3D渲染和动画 响应式交互设计（悬停效果+激活状态） 预加载多张展示图片 亮点： 流畅的3D动画过渡效果 精致的UI细节（阴影、边框等） 现代化视觉效果 页面整体设计简洁但视觉效果突出，适合展示艺术作品或产品图片。
js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
weixin_35976993的博客
02-26 453
特效描述：html5 tweenmax.js 打碎玻璃图片 轮播切换特效。html5碎玻璃图片切换特效，tweenmax.js实列代码结构1. 引入CSS2. 引入JS3. HTML代码const TWO_PI = Math.PI * 2;var images = [],imageIndex = 0;var image,imageWidth = 768,imageHeight = 485;var ...
前端高级动效：3D 波纹图像切换效果（基于 Three.js + GSAP）
2403_88181837的博客
06-24 819
本文介绍了如何整合Three.js、GSAP和Splide.js创建3D波纹过渡效果的图片轮播组件。通过自定义着色器实现波纹动画效果，利用GSAP控制动画进程，结合Splide.js提供轮播框架。关键技术包括：着色器中使用正弦函数生成波纹效果，根据滑动方向调整过渡动画，以及通过事件监听与Splide.js无缝集成。这种方案既保留了传统轮播的交互方式，又增添了引人注目的3D视觉体验，适用于需要提升展示效果的网页应用场景。
HTML5与three.js打造的炫酷立方体碎片动画效果
weixin_42609225的博客
06-02 622
简介：HTML5与three.js的结合可创建引人入胜的3D视觉体验。本项目通过一个互动动画特效，利用three.js库在网页上绘制复杂的3D图形，展示如何通过<canvas>标签、JavaScript和CSS实现立方体碎片的鼠标跟随动画。项目涉及到3D场景创建、鼠标事件监听、动画循环实现等，为开发者提供了学习3D图形编程和交互设计的宝贵资源。
HTML图片切换效果实现实战
weixin_42230607的博客
12-12 2113
本文还有配套的精品资源，点击获取 简介：HTML图片切换是一种常见的交互效果，通过使用JavaScript、HTML和CSS，可以实现图片的动态切换，为用户带来丰富的视觉体验。本案例将详细介绍如何构建一个基本的图片切换功能，包括定义图片容器、设置CSS样式、使用JavaScript实现定时切换以及添加交互元素如导航箭头。最终，这个案例不仅适合作为学习动态网页效果的实践项目，...
CSS实现图片切换效果
qq_35177516的博客
07-16 995
【代码】CSS实现图片切换效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值