基于css3新属性transform，实现3d立方体的旋转

通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示

实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性

从而通过改变transform：rotate属性值来达到3d立方体旋转的效果

　　HTML代码块：

<body>

    <input type="button" class="open" value="点击散开"/>

    <input type="text" class="xNum" value="0"/>//X轴旋转角度

    <input type="text" class="yNum" value="0"/>//Y轴旋转角度

    <input type="text" class="zNum"/>

    <div class="big_box">

        <div class="box">

            <span>1</span>

            <span>2</span>

            <span>3</span>

            <span>4</span>

            <span>5</span>

            <span>6</span>

        </div>

    </div>

</body>

　　CSS代码块：

<style>

        body{cursor: url("img/openhand1.png"),auto;}

        .big_box{

            width: 500px;

            height: 500px;

            margin: 200px auto;

        }

        .box{

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

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

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

            transform-style: preserve-3d;

            transform-origin:100px 100px 00px;

            position: relative;

            transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);

        }

        .box span{

            transition: all 1s linear;

        }

        span{

            display: block;

            position: absolute;

            width: 200px;

            height: 200px;

            box-sizing: border-box;

            border:1px solid #999;

            /*opacity: 0.7;*/

            text-align: center;

            line-height: 200px;

            font-size: 60px;

            font-weight: 700;

            border-radius: 12%;

        }

        .box span:nth-child(1){

            background-color: deepskyblue;

            transform-origin: left;

            transform: rotatey(-90deg) translatex(-100px);//左

        }

        .box span:nth-child(2){

            background-color: red;

            transform-origin: right;

            transform: rotatey(90deg) translatex(100px) ;//右

        }

        .box span:nth-child(3){

            background-color: green;

            transform-origin: top;

            transform: rotatex(90deg) translatey(-100px) ;//上

        }

        .box span:nth-child(4){

            background-color: #6633FF;

            transform-origin: bottom;

            transform: rotatex(-90deg) translatey(100px);//下

        }

        .box span:nth-child(5){

            background-color: gold;

            transform: translatez(-100px);//后

        }

        .box span:nth-child(6){

            background-color: #122b40;

            transform: translatez(100px);//前

        }

        .box:hover span{

            opacity: 0.3;

        }

        .box:hover{

            animation-play-state:paused;//设置动画暂停

        }

    </style>

　　JS代码块：

<script>

    move();

    clickBox();

    //鼠标按下且移动时触发，

    function move(){

        var body = document.querySelector("body");

        var box = document.querySelector(".box");

        var xNum =document.querySelector(".xNum");

        var yNum =document.querySelector(".yNum");

        var x = 0,y = 0,z = 0;

        var xx = 0,yy = 0;

        var xArr = [],yArr = [];

        window.onmousedown = function (e) {//鼠标按下事件

            body.style.cursor = 'url("img/closedhand1.png"),auto';

            xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标

            yArr[0] = e.clientY/2;

            window.onmousemove = function (e) {//鼠标移动事件————当鼠标按下且移动时触发

                xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标

                yArr[1] = e.clientY/2;

                yy += xArr[1] - xArr[0];//获得鼠标移动的距离

                xx += yArr[1] - yArr[0];

                xNum.value = xx+"°";//将所获得距离数字赋值给input显示旋转角度

                yNum.value = yy+"°";

                //将旋转角度写入transform中

                box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";

                xArr[0] = e.clientX/2;

                yArr[0] = e.clientY/2;

            }

        };

        window.onmouseup = function () {//鼠标抬起事件————用于清除鼠标移动事件，

            body.style.cursor = 'url("img/openhand1.png"),auto';

            window.onmousemove = null;

        }

    }

    //点击事件、负责立方体盒子的六面伸展

    function clickBox(){

        var btn = document.querySelector(".open");

        var box = document.querySelector(".box");

        var son = box.children;

        var value = 0;

        //存储立方体散开时的transform参数

        var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",
"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];

        //存储立方体合并时的transform参数

        var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",
"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];

        btn.onclick = function(){

            if(value == 0){

                value = 1;

                btn.value = "点击合并";

                for(var i=0;i<arr1.length;i++){

                    son[i].style.transform = arr1[i];

                    console.log(son[i])

                }

            }else if(value == 1){

                value = 0;

                btn.value = "点击散开";

                for(var j=0;j<arr0.length;j++){

                    son[j].style.transform = arr0[j];

                    console.log(j);

                }

            }

        };

    }

</script>

　　

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转的更多相关文章

  1. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  2. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  3. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  4. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

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

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

  6. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

  7. css3新属性的总结

    今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...

  8. CSS3新属性注释及实例

    这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...

  9. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

随机推荐

  1. LINUX 内核2

    http://blog.csdn.net/acs713/article/category/1363650

  2. PHP设计模式之策略模式

    前提: 在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能.如查 找.排序等,一种常用的方法是硬编码(Hard Cod ...

  3. YAR 并行RPC框架研究

    前几天,部门召开了PHP技术峰会 学习会议,大家分别对这次会议的PPT 做了简单的介绍, 其中提到了 鸟哥[惠新辰]的一篇PPT<微博LAMP 演变>,如果谁有需要可以去谷歌搜,或者去 h ...

  4. isa-swizzling 是什么鬼？

    刚看到这个名字估计很多人有点熟悉,Method Swizzling对不对,不熟悉也没关系,去看看之前的一篇文章黑魔法之Method Swizzling吧.不过也可以根据名称猜测出来所谓的isa-swi ...

  5. Asp.net封装js的类

    using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...

  6. find & rm

    1)查找并删除3天前的历史文件 rm -rfi `find /tmp/ -ctime 3` 2)按分钟查找 find -cmin N

  7. javascript一些常用操作

    一:验证日期 1:日期必须满足yyyy-MM-dd格式 2:日期必须是合法的日期,如2016-02-30就是不存在 //验证就诊日期 function checkVisitDate(date){ va ...

  8. HDU 3533 Escape (BFS + 预处理)

    Escape Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  9. [改善Java代码]频繁插入和删除时使用LinkedList

    一.分析 前面有文章分析了列表的表里方式,也就是“读”的操作.本文将介绍表的“写”操作:即插入.删除.修改动作. 二.场景 1.插入元素 列表中我们使用最多的是ArrayList,下面看看他的插入(a ...

  10. EF 实体+ Newtonsoft.Json 输出JSON 时动态忽略属性的解决方法

    最近的项目采用的是 ASP.NET mvc 4.0 + entity framework 5.0 ,后台以JSON形式抛出数据是借助于Newtonsoft.Json ,   要想忽略的属性前面添加特性 ...