3D旋转照片墙

最新推荐文章于 2024-07-07 11:52:20 发布
最新推荐文章于 2024-07-07 11:52:20 发布
阅读量3.3k 收藏 8
点赞数
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phrtre/article/details/79317755
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>photo</title>
    </head>
    <style>
        #imgWrap{
            width: 550px;
            height: 450px;
            margin: 0 auto;
            perspective: 550px;
        }
        img{
            float: left;
            width: 80px;
            height: 80px;
        }
        #btn{
            width: 100px;
            text-align: center;
            font:16px/40px "微软雅黑";
            color: #fff;
            padding: 0 20px;
            background: rgb(0,100,0);
            margin: 0 auto;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
            margin: 0 auto;
            cursor: pointer;
        }
    </style>
    <body>
        <div id="imgWrap">
            <img src="img/1.jpg" alt="" />
            <img src="img/2.jpg" alt="" />
            <img src="img/3.jpg" alt="" />
            <img src="img/4.jpg" alt="" />
            <img src="img/5.jpg" alt="" />
            <img src="img/6.jpg" alt="" />
            <img src="img/7.jpg" alt="" />
            <img src="img/8.jpg" alt="" />
            <img src="img/9.jpg" alt="" />
            <img src="img/10.jpg" alt="" />
            <img src="img/11.jpg" alt="" />
            <img src="img/12.jpg" alt="" />
            <img src="img/13.jpg" alt="" />
            <img src="img/14.jpg" alt="" />
            <img src="img/15.jpg" alt="" />
            <img src="img/16.jpg" alt="" />
            <img src="img/17.jpg" alt="" />
            <img src="img/18.jpg" alt="" />
            <img src="img/19.jpg" alt="" />
            <img src="img/20.jpg" alt="" />
            <img src="img/21.jpg" alt="" />
            <img src="img/22.jpg" alt="" />
            <img src="img/23.jpg" alt="" />
            <img src="img/24.jpg" alt="" />
            <img src="img/25.jpg" alt="" />
            <img src="img/26.jpg" alt="" />
            <img src="img/27.jpg" alt="" />
            <img src="img/28.jpg" alt="" />
            <img src="img/29.jpg" alt="" />
            <img src="img/30.jpg" alt="" />
        </div>
        <div id="btn">
            显示效果
        </div>
    </body>
    <script>
        window.οnlοad=function(){
            var btn=document.getElementById("btn");
            var imgs=document.querySelectorAll("img");
            var on = true;
            
            //给btn添加点击事件
            btn.οnclick=function(){
                if(!on){
                    return;
                }
                on=false;
                var endNum=0;
                var allEnd=0;
                for (var i=0;i<imgs.length;i++) {
                    (function(i){
                         setTimeout(function(){
                      montion(imgs[i],'1s',function(){
                        this.style.transform='scale(0)';
                    },function(){
                        montion(this,'1s',function(){
                                this.style.transform='scale(1)';
                                this.style.opacity=0;
                        },function(){
                            endNum++;
                            if(endNum==imgs.length){
                                toBig();
                            }  
                        });
                        
                    });
                  },Math.random()*1000);//随机变化
                    })(i)
                }    
                function toBig(){
                for (var i=0;i<imgs.length;i++) {
                    imgs[i].style.transition='';
                    imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';
                    
                    (function(i){
                        setTimeout(function(){
                            montion(imgs[i],'2s',function(){
                                this.style.opacity=1;
                                this.style.transform='rotateY(-360deg) translateZ(0)';
                            },function(){
                                allEnd++;
                                if(allEnd==imgs.length){
                                on=true;    
                                }
                            });
                        },Math.random()*1000);
                    })(i);
                }
            }
            };

        //运动函数（运动的对象，运动的时间，运动的属性函数，运动完要做的事情）
            function montion(obj,time,doFn,callBack){
                obj.style.transition=time;
                doFn.call(obj);
                
                var called=false;
                
                obj.addEventListener('transitionend',function(){
                    if(!called){
                        callBack&&
                     callBack.call(obj);
                        called=true;
                    }
                    
                },false);
            }
        };
    </script>
</html>

phrtre
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D旋转照片墙的CSS
09-24
网页制作中3D旋转照片墙的CSS,搭配同名html代码可以呈现出，3D旋转的酷炫照片效果，照片可以自己设置
二维旋转照片墙的html
09-24
网页制作中二维旋转照片墙，搭配同名的CSS,呈现出来的效果是：可以旋转不容角度的多张照片，照片自己放进去，有模板
CSS3旋转照片墙
二琳爱吃肉的博客
08-14 407
效果 图片要求 小图125px125px 大图750px500px 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>七夕快乐宝贝子~</title>
three.js实现3D模型任意方向旋转
最新发布
qq_38229938的博客
07-07 316
因为业务需要，我们在公司官网使用Three.js实现了可鼠标拖动任意旋转的3D旋转模型，可是实现之后发现除了Z轴方向都可以任意旋转，但是Z轴方向最多只能旋转180度。找遍全网也没有找到相关的资料来解释错在了哪一步，最终还是在github仓库中找到使用案例才得以解决。
旋转照片墙---不熟悉的知识点
scwMason的博客
08-24 378
1.css3弹性盒子,用于布局多个子元素 display:flex   2.CSS justify-content 属性 结合弹性盒子进行布局   3.$(this).index() index()方法是获取当前的索引值，可以用再点击事件上   4.CSS3 transform属性 可以进行不同方向不同角度的转动   5.CSS3 transition 属性  ...
as3---3D图片墙
anyan1858的博客
11-06 193
　　其实我这人逻辑能力并不强，所以只能在大概了解有些什么类型的项目之后提前把所有需要用到的功能全都写一遍，这样我才能安心。 　　这次的事3D图片墙，以前没有写过，只能先写一次了。 　　代码如下： 模型类 package { import flash.display.Sprite; import flash.display.DisplayObject...
3D旋转照片墙html
12-26
总的来说，创建一个3D旋转照片墙涉及HTML5的基本结构、CSS3的3D变换以及可能的JavaScript交互。通过熟练掌握这些技术，开发者可以构建出富有创新性和吸引力的网页元素，提供给用户独特的浏览体验。
3d照片墙循环播放
09-01
1. **3D模型和布局**：定义3D照片墙的布局，包括照片或视频的位置、旋转角度、大小等属性。 2. **数据绑定**：将照片和视频数据与UI元素绑定，实现内容的动态加载。 3. **动画控制**：编写控制照片和视频播放、切换...
3d旋转球体照片墙可参考
05-31
3D旋转球体照片墙是一种创新的视觉展示方式，它利用三维空间中的球体结构来展示多张照片，同时结合动态旋转效果，为用户带来独特的观赏体验。这种技术在网站设计、应用界面或者展览展示中都有可能被采用。 首先，...
WPF 仿3D照片墙旋转动画
01-09
4. **绑定动画到Transform3D**：通过设置`Storyboard.TargetName`和`Storyboard.TargetProperty`，将动画绑定到`RotateTransform3D`的`Rotation`属性上，实现3D旋转效果。 **第二种实现方式：使用关键帧动画...
3D照片旋转
qq2622482966的博客
06-15 385
基于jquery 开发3D照片旋转程序 <!doctype html> <html> <head> <meta charset="utf-8"> <title>3D照片旋转</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"&g...
WPF3D照片墙
03-03
该资源是由WPF语言编写的，一个3D方式展示照片的demo。
3DWall(AS3图片墙组件)
03-06
超强的flash as3图片墙组件,直接在属性面板中设置就可以用，非常简单！
WPF 3D效果图片墙、翻转等效果.zip
09-12
WPF 3D效果图片墙、翻转等效果.，其中包含简单3D效果，良心资源，包含翻转效果、照片墙效果等、都是源码支持二次编辑
as3 图片展示
02-16
as3 flash 图片展示 照片墙 图片展示 照片墙
wpf照片墙（带有3d效果）.rar
05-15
wpf照片墙（带有3d效果）
旋转合并照片墙-特效照片墙
花花的博客
06-08 2879
思路： 首先预加载照片，分大图小图两个循环预加载函数，共48张图片，count记录循环次数，count==48时执行loadSuccess()中代码。 先让照片显示在div中，然后定位隐藏在左上角，然后计算每张图片应该在的位置，设置其left和top。使用transition语法让他们动态显示，并且设置不同的延迟时间TransitionDelay让他们一张一张显示，并且有一个随机角度（...
基于css3的一个照片墙，可实现图片放大，旋转
weixin_38245489的博客
04-23 1936
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; h1{ text-align: center; } body{
flash 与3D笔记：图片墙（1）
夏天的树人的专栏
09-19 3603
flash 与3D笔记：图片墙（1）
html3d旋转照片墙
08-13
要实现HTML中的3D旋转照片墙效果，你可以按照以下步骤进行操作： 1. 首先，在父容器上设置透视效果。使用属性perspective来设置透视景深，数值一般为900px-1200px。例如，perspective: 1200px; [3] 2. 接下来，创建一个容器盒子，并给它设置绝对定位。这个容器将成为照片墙的父元素。例如： ``` .container { position: absolute; width: 1000px; height: 500px; top: 15%; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; justify-content: center; align-items: center; perspective: 1000px; } ``` <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [如何用css实现一个3D旋转照片墙](https://blog.csdn.net/qq_53983648/article/details/127853616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值