<!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:;

         left:;

         width:200px;

         height:200px;

     }

     #box .face{

         background: yellow;

         transform:translateZ(100px);

     }

     #box .back{

         background: #;

         transform:translateZ(-100px);

     }

     #box .top{

         background: #;

         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=; //x轴旋转角度

         var y=;//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. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  2. css3立体旋转动画

    demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...

  3. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  4. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  5. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  6. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  7. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  8. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  9. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

随机推荐

  1. 51nod 1134 最长递增子序列

    题目链接:51nod 1134 最长递增子序列 #include<cstdio> #include<cstring> #include<algorithm> usi ...

  2. Eclipse新建web项目正常启动tomcat不报错,但不能访问项目的解决方法

    原因:  虽然我手动添加了自己下载的tomcat,但是由于在Eclipse中创建Server时,"Server Locations"选项采用的时默认配置,即"Use wo ...

  3. 读javascript高级程序设计13-JSON

    JSON是一个轻量级的数据格式,可以简化表示数据结构的工作量.在实际工作中,我们经常用它来传递数据,不过对于其使用的一些细节还是需要注意的.在ECMAScript5中定义了原生的JSON对象,可以用来 ...

  4. Dynamo涉及的算法和协议——p2p架构，一致性hash容错+gossip协议获取集群状态+向量时钟同步数据

    转自:http://www.letiantian.me/2014-06-16-dynamo-algorithm-protocol/ Dynamo是Amazon的一个分布式的键值系统,P2P架构,没有主 ...

  5. 使用ASP.NET 上传文件 三种类型判断方法(后缀,MIME,数据流)

    #region 一. 安全性比较低,把文本文件1.txt改成1.jpg照样可以上传,但其实现方法容易理解,实现也简单,所以网上很多还是采取这种方法. Boolean fileOk = false; s ...

  6. （BFS）poj2935-Basic Wall Maze

    题目地址 题目与最基本的BFS迷宫的区别就是有一些障碍,可以通过建立三维数组,标记某个地方有障碍不能走.另一个点是输出路径,对此建立结构体时要建立一个pre变量,指向前一个的下标.这样回溯(方法十分经 ...

  7. [vijos P1391] 想越狱的小杉

    考前最后一题,竟然是第一次码SPFA,虽然这个算法早有耳闻,甚至在闻所未闻之前自己有过一个类似的想法,说白了就是广搜啊,但是敲起来还是第一次啊,而且这还不是真正意义上的SPFA. 完全按照自己想法来码 ...

  8. 超链接<a></a>

    1.<a href="#" target="_self原窗口-默/_blank新窗口/_top/_parent"></a> 绝对路径:f ...

  9. PostgreSQL的9.4已经发布（译）

    http://www.postgresql.org/about/news/1557/ 2014年12月18日,PostgreSQL全球开发小组发布PostgreSQL9.4,PostgresQL是世界 ...

  10. Qt开发环境中使用报表控件FastReport遇到的一些问题（二）

    上一节中谈到的那个问题:传递的变量内容如果是纯英文,报表报错.经笔者反复测试,找到了解决办法:代码中第5行替换为以下 params<<"my_var"<<& ...