<!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. Visual Studio添加dll程序集引用操作步骤

    Visual Studio 中添加引用的操作: 在“解决方案资源管理器”中,先右击项目图标,在弹出菜单选择“添加引用...” 然后在弹出的窗口中选择所要添加的选项,点击确定就可以了. 原文:http: ...

  2. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  3. ASP.NET MVC：窗体身份验证及角色权限管理示例

    ASP.NET MVC 建立 ASP.NET 基础之上,很多 ASP.NET 的特性(如窗体身份验证.成员资格)在 MVC 中可以直接使用.本文旨在提供可参考的代码,不会涉及这方面太多理论的知识. 本 ...

  4. 转：Web应用程序项目XX已配置为使用IIS

    转:http://www.cnblogs.com/Joetao/articles/2392526.html 今天在看开源项目Umbraco是,出现一个项目加载不了,并报如下错误: Web应用程序项目U ...

  5. NSFileManager文件操作的十个小功能

    NSFileManager文件操作的十个小功能 NSFileManager是一个单列类,也是一个文件管理器.可以通过NSFileManager创建文件夹.创建文件.写文件.读文件内容等等基本功能. 下 ...

  6. android创建自定义控件

    新建一个布局title.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...

  7. 一个基于DDD的开源项目,各种技术！

    基于asp.net mvc + DDD 构架的开源.net cms系统. 运行截图: 特性: 跨平台 支持Windows.Linux.MacOX运行.linux运行案例:http://blog.ops ...

  8. Windows Server 2012 R2下通过80端口访问Odoo ERP

    背景 Odoo 9.0系统,安装于Windows Server 2012R2,同时与IIS并存.Odoo自带web服务器,使用端口8069.因客户需要用80端口访问,因此需要进一步设置,且8069端口 ...

  9. 读书笔记——Windows核心编程（8）Interlocked系列函数

    先让我们来复习下小学知识 A+B=C//式中A为被加数,B为加数. A-B=C//式中A为被减数,B为减数. 再让我们来明确一个知识点:返回值为void的Windows函数意味着一定会执行成功. -- ...

  10. PowerDesigner概述(系统分析与建模)以及如何用PowerDesigner快速的创建出这个数据库

    PowerDesigner是Sybase公司推出的一个集成了企业架构,UML(统一建模语言)和数据库的CASE(计算机辅助软件工程)工具.它 不仅可以用于系统设计和开发的不同阶段(即业务分析,概念模型 ...