这段时间有点闲，所以就自己找些小玩意来练习练习。今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子，布局方面用到css3 3D转换技术，通过transform控制旋转实现的。

上个图

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    *{

        padding: 0;

        margin: 0;

    }

    #experiment{

        -webkit-perspective: 800;

        -webkit-perspective-origin: 50% 50%;

    }

    #cube{

        position: relative;

        margin: 200px auto;

        width: 200px;

        height: 200px;

        -webkit-transform-style: preserve-3d;

        cursor: pointer;

    }

    .face{

        position: absolute;

        width: 160px;

        height: 160px;

        line-height: 160px;

        text-align: center;

        padding: 20px;

        font-weight: bold;

        color: #fff;

        background: #000;

        font-size: 160px;

        -webkit-transition: -webkit-transform 1s linear;

        opacity: 0.8;

    }

    .face:nth-child(2){

        -webkit-transform-origin: right;

        -webkit-transform: rotateY(-90deg);

        background: red;

    }

    .face:nth-child(3){

        -webkit-transform-origin: left;

        -webkit-transform: rotateY(90deg);

        background: yellow;

    }

    .face:nth-child(4){

        -webkit-transform-origin: top;

        -webkit-transform: rotateX(-90deg);

        background: blue;

    }

    .face:nth-child(5){

        -webkit-transform-origin: bottom;

        -webkit-transform: rotateX(90deg);

        background: green;

    }

    .face:nth-child(6){

        -webkit-transform: translateZ(-200px);

        background: gray;

    }

</style>

</head>

<body>

    <div id="experiment">

        <div id="cube">

            <div class="face" id="face1"></div>

            <div class="face" id="face2"></div>

            <div class="face" id="face3"></div>

            <div class="face" id="face4"></div>

            <div class="face" id="face5"></div>

            <div class="face" id="face6"></div>

        </div>

    </div>

<script>

    document.onmousedown= function(event){

        var that = document.getElementById('cube');

        var reg = /\-?[0-9]+\.?[0-9]*/g;

        var bf = that.style.webkitTransform || '0,0';

        var arr = bf.match(reg);

        var bfX = Number(arr[0]);

        var bfY = Number(arr[1]);

        var startX = event.pageX;

        var startY = event.pageY;

        document.onmousemove= function(event) {

            var disX = event.pageX - startX ;

            var disY = event.pageY - startY ;

            var y=(disX+bfY)%360;

            var x=(disY+bfX)%360;

            that.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ(0deg)";

        };

        document.onmouseup=function(event) {

            document.onmousemove=null;

            document.onmouseup=null;

        };

        return false;

    }

</script>

</body>

</html>

js拖拽3D立方体旋转的更多相关文章

  1. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  2. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. js拖拽效果

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

  6. css3-实现3D立方体旋转

    核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...

  7. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  8. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  9. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

随机推荐

  1. 【阿里云产品公测】OTS使用之简单线上产品实践基于PythonSDK

    阿里云用户:morenocjm 实践是检验真理的唯一标准,学习技术需要通过实践过程中的不断尝试,才能够快速掌握要领.OTS是构建在阿里云飞天分布式系统之上的NoSQL数据库服务,提供海量结构化数据的存 ...

  2. 【Open Search产品评测】－ 来往，7天轻松定制属于自己的搜索引擎

    [Open Search产品评测]--   来往,7天轻松定制属于自己的搜索引擎   [使用背景] 相信很多人都遇到过要给网站或者app做一个搜索功能的需求,很久之前自己折腾过lucene,搞了很久, ...

  3. wamp修改多站点配置

    本文介绍如果在wamp中修改配置支持多站点. 第1步,修改httpd.conf,增加8080端口的监听 #Listen 12.34.56.78:80Listen 80Listen 8080 第2步,修 ...

  4. Java中transient有何作用？

    transient关键字用来防止序列化域.如果一个引用类型被transient修饰,则其反序列化的结果是null.基本类型则为0.如果引用类型时不可序列化的类,则也应该使用transient修饰,它在 ...

  5. ps怎么给文字描边

    在设计的时候,单一的文字,往往对人没有多少的吸引力,这就需要我们在文字上加一些文字特效,比如说外发光,描边,投影,等等.在这里我们详细的介绍一下文字的输入,和文字描边的怎么增加,删除的经验.(这些方法 ...

  6. hdu 4494 最小费用流

    思路:这题我在下午重现的时候就用的费用流做,可是各种悲催的超时,只是我一开始的那种建图方式多了一个二分查找. 戏剧性的是,求距离的返回值写成int型了,CodeBlock编译器又没有警告,然后就WA啊 ...

  7. 用xcode6.3编译早期工程时出现Undefined symbols for architecture x86_64错误的解决办法（转）

    Xcode升级到5.1 新特性之一就是默认让所有App都通过64位编译器编译.原来在Xcode5.0.x的时候默认的Standard architectures只有(arm7,armv7s),到5.1 ...

  8. .NET DLL 保护措施详解(四)各操作系统运行情况

    我准备了WEB应用程序及WinForm应用程序,分别在WIN SERVER 2012/2008/2003.Win7/10上实测,以下为实测结果截图: 2012 2008 2003 WIN7 WIN10 ...

  9. HDU 5478 Can you find it(快速幂)

    Problem Description Given a prime number C(1≤C≤2×105), and three integers k1, b1, k2 (1≤k1,k2,b1≤109 ...

  10. Part 36 to 39 Talking about Delegates in c#

    Part 36 Delegates in c# Part 37 Delegates usage in c# class Progim { public static void Main() { Lis ...