<!DOCTYPE HTML>
<html onselectstart="return false">
<head>
    <meta charset="utf-8">
    <title>3D拖拽相册</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
            cursor: url("img/sb.png"),auto;
        }
        *{
            padding:0;
            margin:0;
        }
        body{
            background: #000;

        }
        #wrap{
            width:120px;
            height:180px;
            margin:150px auto;
            position: relative;
            /*3D转换*/
            transform-style: preserve-3d;
            /*3D的一个观看视距*/
            transform: perspective(800px);
        }
        #wrap img{
            width:120px;
            height:180px;
            position: absolute;
            border-radius: 3px;
            box-shadow: 0 0 5px #fff;
        }
    </style>

</head>
<body>
<div id="wrap">
    <img src="http://pic1.hebei.com.cn/0/12/76/34/12763409_670435.jpg">
    <img src="http://img.ivsky.com/img/tupian/img/201010/08/dongji-023.jpg">
    <img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg">
    <img src="http://www.bz55.com/uploads1/allimg/120312/1_120312100435_8.jpg">
    <img src="http://t1.niutuku.com/960/10/10-192927.jpg">
    <img src="http://img2.3lian.com/2014/f2/164/d/20.jpg">
    <img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg">
    <img src="http://pic39.nipic.com/20140226/18071023_154707834000_2.jpg">
    <img src="http://www.taopic.com/uploads/allimg/121218/234734-12121Q30S562.jpg">
    <img src="http://img.ivsky.com/img/tupian/img/201010/12/daziran-015.jpg">
    <img src="http://img.article.pchome.net/00/26/98/56/pic_lib/wm/zjjbz2_06.jpg">
</div>
</body>
</html>
<script>
    var oWrap = document.getElementById("wrap");
    //在window窗口加载外成功后触发
    window.onload = function(){
        var oImg = oWrap.getElementsByTagName("img");
        //360处于所有的img  求出一个img所占的度数
        var Deg = 360 / oImg.length;
        //32.333
        console.log(Deg)

        for(var i = 0; i < oImg.length; i++){
            //设置每个img的旋转角度  chuan si fuo mu
            oImg[i].style.transform = 'rotateY('+ Deg * i + 'deg) translateZ(350px)';
            //开始拖动时触发
            oImg[i].ondragstart = function(){
                return false;
            }
        }
        var roX = 0, roY = 0;
        /**********************内部样式*******************************/
        document.onmousedown = function(event){
            //获取鼠标点击时候的坐标
            x_ = event.clientX;
            y_ = event.clientY;
            //鼠标在移动时
            this.onmousemove = function(event){
                //获取鼠标移动时候的坐标
                x = event.clientX;
                y = event.clientY;
                //获取点击和移动时候的偏移量
                xN = x - x_;
                yN = y - y_;
                //增加缓动的动作
                roY += xN * 0.1 ;
                roX -= yN * 0.1;
                //设置3D 元素距视图的距离为800  旋转X轴 和Y周
                //perspective  3D效果的一个观看视距
                oWrap.style.transform = 'perspective(800px) rotateX('+ roX+'deg) rotateY('+ roY+'deg)';

                //就是获取当然动态点的坐标，为了下一次鼠标点击做参考
                x_ = event.clientX;
                y_ = event.clientY;
            }

            this.onmouseup = function(){
                this.onmousemove = null;
            }
        }
    }
</script>

　　

3D旋转相册（适合新手）的更多相关文章

  1. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  2. css3制作3d旋转相册

    此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...

  3. 3D旋转相册的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS3实现3D旋转相册

    静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...

  5. Flash相册-------3D旋转应用

    1.图层一,图片1,转换为元件 2.3D旋转工具,变形--->y->180

  6. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  7. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...

  8. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  9. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

随机推荐

  1. Linux 忘记root密码 的解决办法

    以单用户维护模式登录 先将系统重启, 在读秒时按下任意键进入菜单界面,再仔细看菜单下的说明,按下e就能进入grub的编辑模式,如下 将光标移动到kernel那行, 再次按e进入kernel的编辑界面中 ...

  2. Linux 如何解决 xhost: unable to open display ""

    [root@host02 ~]# vncservice You will require a password to access your desktops. Password: Verify: x ...

  3. vs 配置宏

    Win_$(PROCESSOR_ARCHITECTURE)_$(PlatformArchitecture) <==> Win_x86_64 OR Win_x86_32$(Configura ...

  4. storm 配置，呵呵。

    配置项 配置说明 storm.zookeeper.servers ZooKeeper服务器列表 storm.zookeeper.port ZooKeeper连接端口 storm.local.dir s ...

  5. win7双系统安装ubuntu并配置常用软件

    首先在win7下磁盘清理出来空间具体方法找度娘就行了. 下面开始准备安装: 1.下载easyBCD 2.打开:添加新条目--NeoGub--安装 3.点击配置  修改menu.lst title In ...

  6. sencha touch打包成安装程序

    为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...

  7. Tiny6410 LCD设置

    1.注意LCD的硬件连接 2.LCD初始化 2.1 初始化步骤 LCD时序设置 LCD芯片 2.2 引脚初始化 2.3 配置 MIFPCON 寄存器及SPCON 寄存器 2.4 配置VIDCONx 2 ...

  8. hive内部表、外部表、分区表、视图

    1.Table 内部表 1).与数据库中的Table在概念上是类似的 2).每一个Table在Hive中都有一个相应的目录存储数据 3).所有的Table数据(不包括 External Table) ...

  9. angularJS全选功能实现

    最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...

  10. SQLyog-直接导出JSON格式的数据

          前言:以前做过的一个项目,有这样的一个需求使用搜索引擎来查询对应的区域信息,不过区域信息要先导出来,并且数据格式是JSON格式的,在程序中能实现这个需求,不过下面的这种方法更加的简单,通过 ...