<!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. C# 抽象类abstract

    不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例,有未被实现的方法.抽象类不可以new对象. "一个包含一个或多个纯虚函数的类叫抽象类,抽象类不能被 ...

  2. App开放接口api安全性的设计与实现

    前言 在app开放接口api的设计中,避免不了的就是安全性问题,因为大多数接口涉及到用户的个人信息以及一些敏感的数据,所以对这些接口需要进行身份的认证, 那么这就需要用户提供一些信息,比如用户名密码等 ...

  3. HUD 4007 [扫描线][序]

    /* 大连热身B题 不要低头,不要放弃,不要气馁,不要慌张 题意: 坐标平面内给很多个点,放置一个边长为r的与坐标轴平行的正方形,问最多有多少个点在正方形内部. 思路: 按照x先排序,然后确定x在合法 ...

  4. 开源免费的天气预报接口API以及全国所有地区代码(国家气象局提供)

    天气预报一直是各大网站的一个基本功能,最近小编也想在网站上弄一个,得瑟一下,在网络搜索了很久,终于找到了开源免费的天气预报接口API以及全国所有地区代码(国家气象局提供),具体如下: 国家气象局提供的 ...

  5. ie8用ajax访问不能每次都刷新的问题

    最近发现,用ajax访问后台,用ie8访问,第一次可以正常返回值,后面就一直不会执行后台,总是返回第一次访问的结果. 用ie9,ie10等都没问题,chrome,等浏览器也没有问题. 测试后发现,是i ...

  6. 转载-------makefile 使用总结

    转载自:http://www.cnblogs.com/wang_yb/p/3990952.html 1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的 ...

  7. 关于handler

    1. 一个Handler只有一个队列;2. 在调用Handler.post(Runnable runnable)方法时,会将runnable封装成一个Message; 3. 在队列执行时,会判断当前的 ...

  8. 如何创建vss2005的数据库

    配置如下 VSS手工创建数据库的步骤(设数据库根目录为D:\VSS): 1.在根目录中创建名为srcsafe.ini(全局配置文件)的文件,文件内容如下: Data_Path = data Temp_ ...

  9. 静态static

    静态使用注意: 1.静态方法只能访问静态成员(方法和变量).非静态方法既可以访问静态也可以访问非静态. 2.静态方法中可以定义this,super关键字.因为静态优先于对象存在. 3. 主函数是静态的 ...

  10. 进击的docker 一 ： Docker 简介

    Docker简介 1.什么是docker 1.1.docker 起源 开源项目 诞生2013年初 GO语言开发实现 遵从了Apache2.0协议 项目代码在GitHub维护 1.2.docker目标 ...