3d相册 订阅
3D相册是一个支持Android 2.1+的图形图像类软件。 展开全文
3D相册是一个支持Android 2.1+的图形图像类软件。
信息
软件名称
3D相册
更新时间
2012-04-13
软件语言
中文
软件大小
397KB
3D相册基本信息
3D相册 V1.04 下载:1181次类别:图形图像系统:Android 2.1+
收起全文
精华内容
下载资源
问答
  • 程序员给女朋友做的精美3D相册

    万次下载 热门讨论 2014-04-29 10:28:28
    程序员给女朋友用HTML5制作的3D相册 感觉挺漂亮。 整理里一个自己可以换相片
  • 3D相册

    2021-02-22 00:52:22
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...3D相册</title> <style> body { perspective: 1000px; } section { position: relative; .
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>3D相册</title>
        <style>
            body {
                perspective: 1000px;
            }
    
            section {
                position: relative;
                width: 300px;
                height: 200px;
                margin: 100px auto;
                transform-style: preserve-3d;
                animation: rotate 10s linear infinite;
                background: url("img/2024.jpg") no-repeat;
            }
    
            section:hover {
                animation-play-state: paused;
            }
    
            @keyframes rotate {
                0% {
                    transform: rotateY(0);
                }
                100% {
                    transform: rotateY(360deg);
                }
            }
    
            section div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url("img/2022.jpg") no-repeat;
            }
    
            section div:nth-child(1) {
                transform: translateZ(300px);
            }
    
            section div:nth-child(2) {
                transform: rotateY(60deg) translateZ(300px);
            }
    
            section div:nth-child(3) {
                transform: rotateY(120deg) translateZ(300px);
            }
    
            section div:nth-child(4) {
                transform: rotateY(180deg) translateZ(300px);
            }
    
            section div:nth-child(5) {
                transform: rotateY(240deg) translateZ(300px);
            }
    
            section div:nth-child(6) {
                transform: rotateY(300deg) translateZ(300px);
            }
    
        </style>
    </head>
    <body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    
    </body>
    </html>

     

    展开全文
  • 3d相册

    2020-06-14 00:13:31
    <!... <... <head>...3d相册</title> </head> <style> #box1 { /* 宽 */ width: 300px; /* 高 */ height: 300px; /* 边框 */ border: 1px solid black;

    页面脚本

    我的图片是是本地的,大家可以放上自己喜爱的图片

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>3d相册</title>
    	</head>
    	<style>
    		#box1 {
    			/* 宽 */
    			width: 300px;
    			/* 高 */
    			height: 300px;
    			/* 边框 */
    			border: 1px solid black;
    			/* 外间距 */
    			margin-left: auto;
    			margin-right: auto;
    			margin-top: 100px;
    			/* 算上边框间距 */
    			box-sizing: border-box;
    			/* 视距 */
    			perspective: 1200px;
    			
    			
    		}
    
    		#box2 {
    			border: 1px solid red;
    			width: 300px;
    			height: 300px;
    			/* 保存子盒子中的样式 */
    			transform-style: preserve-3d;
    			/* 执行动画 动画名,效果时间,延迟时间,匀速,无限期旋转*/
    			
    			animation: im 5s 1s linear infinite;
    			
    			
    		}
    
    		body {
    			/* 整体背景图 */
    		background-image: url(img/1.jpg);
    		background-size: auto;
    		
    		}
    		
    		img {
    			
    			border: 1px solid transparent;
    			width: 300px;
    			height:300px;
    			/* 绝对定位 */
    			position: absolute;
    	/*粗细算入宽和高中*/
    				box-sizing: border-box;
    				/*渐变效果 时长 延迟时间*/
    				transition: transform 1s 0.5s;	
    		}
    		/* 定义动画 */
    		@keyframes im{
    			/* 开始时样式 */
    			from{
    				transform: rotateY(0deg);
    			}
    			/* 结束时样式 */
    			to{
    				transform: rotateY(360deg);
    			}
    		}
    		/* 图片角度 旋转与位移*/
    		#i1{
    			transform: rotateY(0deg) translate3d(0px,0px,300px);
    		}
    		#i2{
    			transform: rotateY(60deg) translate3d(0px,0px,300px);
    		}
    		#i3{
    			transform: rotateY(120deg) translate3d(0px,0px,300px);
    		}
    		#i4{
    			transform: rotateY(180deg) translate3d(0px,0px,300px);
    		}
    		#i5{
    			transform: rotateY(240deg) translate3d(0px,0px,300px);
    		}
    		#i6{
    			transform: rotateY(300deg) translate3d(0px,0px,300px);
    		}
    		
    		#box2:hover{
    				/*鼠标移上去就停下*/
    				animation-play-state: paused;
    		}
    		
    			/*放大倍数 scale*/
    		#i1:hover{
    			transform: rotateY(0deg) translate3d(0px,0px,300px) scale(1.25);
    		}
    		#i2:hover{
    			transform: rotateY(60deg) translate3d(0px,0px,300px) scale(1.25);
    		}
    		#i3:hover{
    			transform: rotateY(120deg) translate3d(0px,0px,300px) scale(1.25);
    		}
    		#i4:hover{
    			transform: rotateY(180deg) translate3d(0px,0px,300px) scale(1.25);
    		}
    		#i5:hover{
    			transform: rotateY(240deg) translate3d(0px,0px,300px) scale(1.25);
    		}
    		#i6:hover{
    			transform: rotateY(300deg) translate3d(0px,0px,300px) scale(1.25);
    		}
    		</style>
    	<body>
    		<div id="box1">
    			<div id="box2">
    				<img src="img/q1.png" id="i1"/>
    				<img src="img/q2.jpg" id="i2"/>
    				<img src="img/q3.jpg" id="i3"/>
    				<img src="img/q1.png" id="i4"/>
    				<img src="img/q2.jpg" id="i5"/>
    				<img src="img/q3.jpg" id="i6"/>
    			</div>
    		</div>
    	</body>
    </html>
    
    

    效果
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • js 3D相册 js 3D相册

    2018-04-20 15:20:14
    js 3D相册;js 3D相册;js 3D相册;js 3D相册;js 3D相册
  • 3D相册.html

    2019-10-24 15:10:49
    3D相册.html
  • 3D相册代码.zip

    2020-08-15 11:15:41
    送女生的相册,3d相册源码,欢迎大家来下载,
  • 网页3d相册

    2015-01-04 17:05:34
    基于互联网的一个3d相册网页.包含Java脚本.一个360度的相册展示.
  • 3D相册源码

    2014-07-15 15:13:10
    3d相册的例子,想了解学习android相册的朋友可以下载看看。
  • 3d相册制作代码

    2018-09-14 16:26:26
    3d相册制作代码,欢迎大家来下载,保你满意开心,希望你能下载
  • HTML3D相册

    2014-07-26 11:44:31
    HTML网页 程序员给女朋友用HTML5制作的3D相册
  • 3d相册js demo

    2016-02-19 14:30:17
    javascript实现3d相册效果 值得下载
  • android 3d相册代码

    2015-06-30 11:14:09
    android 3d grally的代码,实现3D相册功能
  • 3D相册源码.rar

    2020-02-27 15:53:18
    该资源为3D相册的源码,功能齐全规范,希望大家下载后能帮助到大家,值得我 们好好 学习以及参考
  • 程序员给女朋友用HTML5制作的3D相册

    千次下载 热门讨论 2014-04-21 15:12:15
    程序员给女朋友用HTML5制作的3D相册 感觉挺漂亮,自己分析了一下。 整理里一个自己可以换相片
  • html5的3D相册

    2018-12-11 16:45:44
    html5的3D相册代码,其中jpg因人而异,采用前端技术的一个小制作。
  • 流星动画3D相册.zip

    2021-01-05 09:58:16
    抖音超火❤ 助力程序员撩妹手到擒来 html+css+js 3D相册(含音乐)可自定义图片
  • HTML5 3D相册

    2015-08-01 22:14:22
    程序员给女朋友用HTML5制作的3D相册感觉挺漂亮。 整理里一个自己可以换相片
  • 3D相册html5源码

    2015-06-12 14:35:24
    3D相册html5源码
  • js和CSS3炫酷3D相册展示*{margin:0;padding:0;}body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;};h1{width:277;height:76px;margin:30px auto 0;}.xc-3D{width:100%;height:300px;...
    js和CSS3炫酷3D相册展示

    *{margin:0;padding:0;}

    body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;};

    h1{width:277;height:76px;margin:30px auto 0;}

    .xc-3D{width:100%;height:300px;background:#fff;margin-top:100px;position:relative;transform-style:preserve-3D;/*转变3D*/perspective:800px;//景深}

    .xc-3D img{position:absolute;-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(0,0,0,0.1),rgba(0,0,0,0.5));transition:1s;}

    .xc-3D img .forn{transform:rotateY(45deg);transfromZ(-100px);}

    .xc-3D img .now{transform:rotateY(0deg);transfromZ(100px);}

    .xc-3D img .last{transform:rotateY(-45deg);transfromZ(-100px);}

    潭州logo

    //h1装logo

    cctv2采访潭州教育

    潭州夜景

    潭州教育软件集群老师

    潭州教育九周年庆

    潭州教育九周年庆

    潭州教育第二届技术峰会

    潭州教育LED灯

    潭州教育艺术老师

    潭州教育软件课程研发会

    var imgL=$(.xc-3D img).length;//代表有几个img

    var lastMin=Math.floor(imgL/2);//向下取整数得到中间那个 初始中间序列号

    for(var i=0;i

    if(i

    $(".xc-3D img")eq(1).addClass("forn");

    }else if(i>lastMin){

    $(".xc-3D img")eq(1).addClass("last");

    }else{

    $(".xc-3D img")eq(1).addClass("now");

    }

    };

    };

    //控制位置

    function mind(){

    //浏览器宽度

    var w_l=$(window).width();

    var _left=w_l/2)-$(".xc-3D.now").width/2;

    $(".xc-3D img.now").css({left:_left+"px"});

    for(var i=0;i

    //非常重要

    $(".xc-3D img.now").eq(i).css(left:_left-(lastMin-i)*150+"px");

    };

    //把left存储起来

    Left[i]=parseInt($(".xc-3D img").eq(i).css("left"));//把字符串转化为数字

    }

    $(.xc-3D img).click(funtion(){

    //添加样式

    for(var i=0;i

    var nowMin=$(this).index();

    if(i

    $(".xc-3D img")eq(1).removeClass().addClass("forn");

    }else if(i>nowMin){

    $(".xc-3D img")eq(1).removeClass().addClass("last");

    }else{

    $(".xc-3D img")eq(1).removeClass.addClass("now");

    };

    };;

    //确定位置

    for(var i=0;i

    Left[i]-=(nowMin-lastMin)*150;//为什么

    //非常重要

    $(".xc-3D img").eq(i).css({left:Left[i]+"px"});

    };

    lastMin=nowMin;//当前和初始值交替

    })

    css兼容,js兼容,渲染,底层 ,内核兼容

    e4f66890dd763cbbe8ac6335b585d876.png

    d1fe4ca6e326a181fc07a1087a358c12.png

    d01cb2abb5df04a623f417bf053c85c1.png

    78f1e372121d57daeca78f4c7970a608.png

    1投影

    一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

    GJM :JS &plus; CSS3 打造炫酷3D相册 &lbrack;转载&rsqb;

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

    jQuery&period;smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

    超酷3D照片展示效果

    @{ Layout = null; } tf-8">

    基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

    Css3炫酷总结使用

    先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...

    随机推荐

    【转】 各种 基于Unity3d 引擎的Android游戏优化 (drawcall)

    合并纹理,减少贴图数量,合并网格,ui上减少不必要的层级叠加关系等   1. 更新不透明贴图的压缩格式为ETC 4bit,因为android市场的手机中的GPU有多种,每家的GPU支持不同的压缩格式 ...

    eclipse - 自动换行

    eclipse自动换行,设置的感觉不是很好用,可以从这个网址进行更新安装: http://ahtik.com/eclipse-update/

    ServletContextListener 解析用法

    ServletContext 被 Servlet 程序用来与 Web 容器通信.例如写日志,转发请求.每一个 Web 应用程序含有一个Context,被Web应用内的各个程序共享.因为Context可 ...

    leetcode Palindrome Number python

    class Solution(object): def isPalindrome(self, x): """ :type x: int :rtype: bool &quo ...

    mysql 假设存在id则设数据自添加1 ,不存在则加入。java月份计算比較

    INSERT INTO invite_rejectlog_num  ...

    SrpingDruid数据源加密数据库密码

    前言 在工作中遇到这样一个问题:开发过程中将数据库的账号.密码等信息配置在了一个单独的properties配置文件中(使用明文).但运维人员要求在配置文件中的密码一律不得出现明文. 环境 Spring ...

    固定底部导航菜单-续集(BottomMenu-移动端V3&period;0)

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

    python super()函数

    super()函数是用来调用父类(超类)的一个方法 super()的语法: python 2 的用法: super(Class, self).xxx  # class是子类的名称 class A(ob ...

    35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

    Hibernate- QBC查询方式

    QBC查询方式 01.基本查询 02.组合查询 03.关联查询 04.分页查询 05.QBE查询 06.离线查询

    展开全文
  • 3D相册-H5.rar

    2019-09-29 14:09:46
    使用HTML5编写的3D相册,适合给女朋友用,非常奈斯,声明我不是作者本人!
  • 之前我们为大家分享过很多样式各异的HTML5 3D相册,比如这款3D照片墙...这次分享的也是一款3D相册,不过它更多展示的是相册架子,怎么说呢,它不能像前面那款那样展示图片,而是分层切换展示每一层架子上的相册。
  • CSS3 3D相册

    千次阅读 2017-12-18 20:29:24
    今天来做一个基于CSS3 3D属性的3D相册效果

    3D album.gif

    今天来做一个基于CSS3 3D属性的3D相册效果。

    1 基本布局

    首先来完成基本布局,从效果图中可以看到,所有图片一开始均位于同一位置,然后经过不同的角度的旋转以及平移到不同的位置,达到一个”旋转散开”的效果。所以基本的思路就是:

    • 所有图片定位到页面中同一位置
    • 遍历图片,利用transform属性进行旋转、平移,加上transition制造动画效果
    • 调整perspective,改变视角

    所有首先来完成基本布局:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charst="utf-8">
            <title>3D相册</title>
    
            <style>
                * {
                    margin: 0px;
                    padding: 0px;
                }
                body {
                    background-color: #000;
                }
    
                .images {
                    width: 100px;
                    height: 100px;
                    margin: 150px auto;
                    position: relative;
                }
    
                .images img {
                    position: absolute;
                    box-shadow: 0px 0px 8px #eee;
                }
            </style>
        </head>
    
        <body>
            <div class="container">
                <div id="warp" class="images">
                    <img src="images/01.png">
                    <img src="images/02.png">
                    <img src="images/03.png">
                    <img src="images/04.png">
                    <img src="images/05.png">
                    <img src="images/06.png">
                    <img src="images/07.png">
                    <img src="images/08.png">
                    <img src="images/09.png">
                    <img src="images/10.png">
                    <img src="images/11.png">
                </div>
            </div>
        </body>
    </html>

    3d_album1.png

    现在所有图片都重叠到了一起。

    2 旋转、平移

    接下来我们需要对各个图片进行旋转、平移。从图中可以看到,所有的图片都是绕Y轴进行了一定的旋转,所有首先来给各个图片加上一个旋转效果,之于旋转角度则各个图片平分:

    <script>
        window.onload = function() {
            var wrap = document.getElementById('wrap');
            var images = document.getElementsByTagName("img");
            var length = images.length;
            var deg = 360 / length;
            for(var i = 0; i < length; i++) {
              var transform = "rotateY(" + deg * i + "deg) ";
              images[i].style.transform = transform;
            } 
        }
    </script>

    3d_album2.png

    可以看到,图片已经出现了不同程度的旋转,但是依然是重叠在一起的。所以接下来就是让各个图片”分开”:按Z轴方向进行平移:

        window.onload = function() {
            var wrap = document.getElementById('wrap');
            var images = document.getElementsByTagName("img");
            var length = images.length;
            var deg = 360 / length;
            for(var i = 0; i < length; i++) {
              var transform = "rotateY(" + deg * i + "deg) tranlateZ(240px)";
              images[i].style.transform = transform;
            } 
        }

    3d_album3.png

    可以看到,图片进行了平移,也达到了”展开”的效果,但由于均处于同一平面,从用户角度观察,依然存在重叠。

    3 改变视角

    为了解决重叠问题,需要改变视角,这时就需要用到perspective + transform

    • 利用perspective指定视角距离
    • 然后通过旋转改变视角
    • 另外由于视角的改变,在进行transform时需要设定transform-style
    .container {
      perspective: 1000px; /*perspective属性指定了观察者与Z=0平面的距离*/
    
    }
    
    .images {
      width: 100px;
      height: 100px;
      margin: 150px auto;
      position: relative;
      transform: rotateX(-50deg) ;
      transform-style: preserve-3d;
    }

    3d_album4.png

    可以看到,图片已经均匀展开了。

    4 动画效果

    最后我们再来给图片的运动加上动画效果:transition属性上场了。为了然动画看起来不凌乱,我们可以通过transition中的延迟来完成:

    window.onload = function() {
      var wrap = document.getElementById('wrap');
      var images = document.getElementsByTagName("img");
      var length = images.length;
      var deg = 360 / length;
      for(var i = 0; i < length; i++) {
        var transform = "rotateY(" + deg * i + "deg) translateZ(240px)";
        var transition = "1s " + 0.2 * i + "s";  // 通过延迟让图片运动排队
        images[i].style.transform = transform;
        images[length - i - 1].style.transition = transition;
      } 
    }

    大功告成!

    展开全文
  • 3D相册制作软件3D相册在一些网站(如:56.com)上...一、在网上搜索3D相册制作软件:3D Flash Gallery,并下载解压出来,看到一个文件:Portable Aneesoft 3D Flash Gallery v2.2.3.414.exe,双击打开它(注:本人在...
  • Jquery 动态3D相册炫酷相册大全 专心为女友定制版 含各种动态相册技术 3d展示为主

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,306
精华内容 522
关键字:

3d相册