<!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. swift学习笔记之-析构过程

    //析构过程deist import UIKit /*析构过程(Deinitialization):析构器只适用于类类型,当一个类的实例被释放之前,析构器会被立即调用.析构器用关键字deinit来标示 ...

  2. Configure SSL for SharePoint 2013

    http://blogs.msdn.com/b/fabdulwahab/archive/2013/01/21/configure-ssl-for-sharepoint-2013.aspx In thi ...

  3. 迭代器 iterator（二）： 用iterator遍历arraylist

           迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址.迭代器修改了常规指针的接口,所谓迭代器是一种概念上的抽象:那些 ...

  4. 学习android学习必备的java基础知识--四大内部类

    学习android必备的java基础知识--四大内部类 今天学习android课程,因为我的主专业是JAVA,但是兴趣班却有这其他专业的同学,学习android 需要具备一些java的基础知识,因此就 ...

  5. 初识UIScrollView

    RootView.m #import "RootView.h" #define YHColor [UIColor colorWithRed:arc4random() % 256 / ...

  6. Python学习一入门

    一.打印Hello和多行文本 print 打印 后跟单引号或者双引号 多行:3个单引号或者3个双引号 二.算术运算 2.1.加减乖法 默认1/2=0 如果需要小数运算,则需要一个运算术上加.或者.0 ...

  7. IOS 网络浅析－（十 NSURLSession下载简介）

    之前本来打算在写两个篇幅,但是在这片开写的时候觉得还是写一个比较好,有利于理解.NSURLSession下载是通过NSURLSession下载代理实现的,上一片也介绍了代理,之所以没有介绍下载是因为, ...

  8. OC第一讲：类和对象

    今天终于开始进行OC的学习了 一.首先讲了NSLog NSLog是oc里面的输出语句,其用法和printf差不多,但是还是有差别的 1,NSLog是自动换行的,不用像printf那样还需要加'\n': ...

  9. 朝花夕拾-android 自定义application 管理activity的生命周期

    为了安全退出多个已创建的activity? 可以自定义application:myapplication. 增加一个list成员保存,一些关键的已创建的activity实例: private List ...

  10. .NET 反射的使用

    1.根据类名获取类实例 string className = "Company.BigProgram.BLL.TestClass"; Type type = Type.GetTyp ...