<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box{

                width:200px;

                height:200px;

                 margin:100px auto;

                 transform:perspective(800px) rotateY(0deg)  rotateX(0deg);

                 transform-style: preserve-3d;

             }

        #box div{

                        position: absolute;

                        top:0;

                        left:0;

                        width:200px;

                        height:200px;

                    }

         #box .face{

                        background: yellow;

                        transform:translateZ(100px);

                    }

         #box .back{

                       background: #996;

                       transform:translateZ(-100px);

                   }

        #box .top{

                        background: #234;

                        transform:translateY(-100px) rotateX(-90deg);

                    }

         #box .bottom{

                        background: green;

                        transform:translateY(100px) rotateX(-90deg);

                    }

         #box .left{

                        background: blue;

                        transform:translateX(-100px) rotateY(90deg);

                    }

        #box .right{

                       background: pink;

                       transform:translateX(100px) rotateY(90deg);

                   }

        /* #box:hover{

          transform:perspective(800px) rotateY(360deg)  rotateX(360deg);

     } */

        </style>

        <script>

        window.onload=function(){

                var oBox=document.getElementById('box');

                var bLeft=false;

                var bRight=false;

                var bTop=false;

                var bBottom=false;

                //初始值

                var x=0; //x轴旋转角度

                var y=0;//y轴旋转角度

                //键盘

                /*document.onkeydown=function(ev){

                     //打开开关

                     switch(ev.keyCode){

                         case 37:

                             bLeft=true;

                             break;

                         case 38:

                             bTop=true;

                             break;

                         case 39:

                             bRight=true;

                             break;

                         case 40:

                             bBottom=true;

                             break;

                     }

                 };

                 document.onkeyup=function(ev){

                     //打开开关

                     switch(ev.keyCode){

                         case 37:

                             bLeft=false;

                             break;

                         case 38:

                             bTop=false;

                             break;

                         case 39:

                             bRight=false;

                             break;

                         case 40:

                             bBottom=false;

                             break;

                     }

                 };

                 setInterval(function(){

                     if(bLeft){

                         y-=4;

                     }

                     if(bBottom){

                          x-=4;

                      }

                      if(bTop){

                          x+=4;

                      }

                      if(bRight){

                          y+=4;

                      }

                      oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'

                 },30)*/

                //鼠标

                document.onmousedown=function(ev){

                        var disX=ev.clientX-y;

                        var disY=ev.clientY-x;

                        document.onmousemove=function(ev){

                                x=disY-ev.clientY;

                                y=ev.clientX-disX;

                                oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'

                             };

                     document.onmouseup=function(){

                                 document.onmouseup=null;

                                 document.onmousemove=null;

                            };

                         return false;

                     };

            };

         </script>

     </head>

<body>

<div id="box">

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

    <div class="back"></div>

    <div class="top"></div>

    <div class="bottom"></div>

    <div class="left"></div>

    <div class="right"></div>

</div>

 </body>

 </html>

css3实现立方体的旋转功能的更多相关文章

  1. 第102天：CSS3实现立方体旋转

    CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. css3通过scale()实现放大功能、通过rotate()实现旋转功能

    css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...

  3. css3实现头像旋转功能(超easy!!!)

    简单好玩的头像旋转功能 html结构 <body> <img src="https://a-ssl.duitang.com/uploads/item/201604/29/2 ...

  4. 纯css3实现的圆形旋转分享按钮

    之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...

  5. 一款基于css3鼠标经过圆形旋转特效

    今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  6. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  7. WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能

    原文:WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能       对于CAD图形来说,3D旋转比较常用,具体实现方法在上篇文章<WPF中3D旋转的实现 >中做了 ...

  8. vue项目中图片预览旋转功能

    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...

  9. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

随机推荐

  1. Selenium&EmguCV实现爬虫图片识别

    概述 爬虫需要抓取网站价格,与一般抓取网页区别的是抓取内容是通过AJAX加载,并且价格是通过CSS背景图片显示的. 每一个数字对应一个样式,如'p_h57_5' .p_h57_5 { backgrou ...

  2. 关于SAP的视图类型

    1 sap的视图的类型sap的视图的类型有五种 Database views (数据库视图):和数据库的视图形同,连接条件是必须自定义. Projection views(投影视图): 用于屏蔽一些字 ...

  3. 【转】Hadoop web页面的授权设定

    转载自过往记忆(http://www.iteblog.com/)本文链接地址: <Hadoop web页面的授权设定>(http://www.iteblog.com/archives/98 ...

  4. Bit-Coin收入的一分钱

    好吧,这是我在Slush's pool上对Bit-coin收入的第一分钱. 回想起来,2013年平安夜开始到今天,将近3个月没日没夜窝在这个矿里挖矿 从最开始的集成显卡挖,买了显卡挖,加了显卡挖,使用 ...

  5. 关于破解IDEA

    博客的意义就在于分享 哈哈 今天想装个 IDEA玩玩 去官网 下了个 安装包 想破解 结果度娘 帮解决了 直接po方法 很简单 就是安装好注册的时候 选择 License server ,填 http ...

  6. Git基本使用命令

    整理Git的一些基本使用命令.   # 1)克隆代码 boldseas@lian-PC MINGW64 /d/TestGroup $ git clone ssh://git@code.boldseas ...

  7. [LoadRunner]性能测试实践_Hessian协议脚本编写

    第一步,新建LR的脚本,选择Java Vuser协议: 第二步,编写hessian测试脚本,如下: import lrapi.lr; import java.net.MalformedURLExcep ...

  8. Java 读取大文件方法

    需求:实际开发中读取文本文件的需求还是很多,如读取两个系统之间FTP发送文件,读取后保存到数据库中或日志文件的数据库中保存等. 为了测试首先利用数据库SQL生成大数据文件. 规则是 编号|姓名|手机号 ...

  9. nginx中使用srcache_nginx模块构建缓存

    nginx中可以将lua嵌,让nginx执行lua脚本,可以处理高并发,非阻塞的处理各种请求,openresty项目中可以使用nignx可以直接构建 srcache_nginx + redis 缓存, ...

  10. PHP面试题集之基础题

    1.用PHP打印出前一天的时间格式是 2006-5-10 22:21:21 date_default_timezone_set('PRC'); //默认时区 echo "今天:", ...