<!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. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  2. 任意类型转换为IntPtr

    之前,将数组.结构体等转换为IntPtr使用的是Marshal.Copy().Marshal.StructureToPtr(),但是有个问题自定义的结构体数组没法这样转化,一般网上给出的解决方法就是通 ...

  3. SAP内存/ABAP内存/共享内存区别

    (1).读取和使用方法不同SAP内存使用SET/GET parameters方法:SET PARAMETER ID 'MAT' field p_matnr.GET PARAMETER ID 'MAT' ...

  4. Java中字节流和字符流的比较（转）

    字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢? 实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作的,而字符流在操作时使用了缓冲区,通过缓冲区再操 ...

  5. android XMl 解析神奇xstream 五： 把复杂对象转换成 xml ,并写入SD卡中的xml文件

    前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...

  6. Android屏蔽HOME键

    public static final int FLAG_HOMEKEY_DISPATCHED = 0x80000000; @Override protected void onCreate(Bund ...

  7. JDBC增删查改（使用配置文件）

    JDBCDemo2.java package com.zhangbz.jdbc; import java.sql.Connection; import java.sql.ResultSet; impo ...

  8. C语言-11-可变参数的实现方案

    概述 某种情况下,我们可能需要一个具有可变参数的函数,C语言提供了一种标准的实现可变参数的方法 C语言实现可变参数的方案是基于标准库的 可变参数的类型 可变参数可以放在一个集合中,可以使用指针类型的参 ...

  9. IOS开发关于测试的好的网址资源

    1. 高级自动化单元测试,推荐看LeanCloud 工程师的李智维的自动化单元测试的直播录影李智维的演示github 2.iOS开发-单元测试 这只是一篇简单的ios测试介绍 3.iOS单元测试 来自 ...

  10. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...