<!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. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  2. 今天发现新大陆：haml和Emmet

    其实一开始小渣渣我只是想接触一下(css预处理器)sass,可是突然冒出一个haml. 原文是酱紫的. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟 ...

  3. 使用一般处理程序HTTPHandler下载文件

    一般来说我们可以用HTTPHandler来处理一些简单的逻辑,比如验证码.下载文件等. 以下载word文档为例讲解一下如何在HHTPHandler中下载文件,不限于word文档,如果下载其他文件,需要 ...

  4. 【读书笔记】iOS-AppKit简介

    一,IBOutlet和IBAction.它们实际上只是AppKit提供的#defines.IBOutlet的含义没有任何作用,因此将不对对它时行编译.IBAction定义为void,这意味着在AppC ...

  5. Android学习一(入门)

    一.Android 系统简介 1.1.1G-4G 1G:模拟制式手机,1995年问世的第一代模拟制式手机,只能进行语音通话, 2G:手机使用GSM,CDMA(9K/s),增加了接收数据的功能 2.5G ...

  6. 用thinkPHP实现验证码的功能

    许多系统的登录都有验证码,而如果使用thinkPHP框架搭建网站的话,验证码的生成和验证就比较容易了 1.生成验证码 thinkPHP有对应生成验证码的方法 要使用验证码,需要导入扩展类库中的ORG. ...

  7. Git使用之设置SSH Key

    设置SSH Key 1.    检查是否已经有SSH Key. $cd ~/.ssh 如果说没有这个目录,就直接看第三步 2.    备份 3.    生成一个新的SSH. $ssh-keygen - ...

  8. UNIX/Linux下C语言的学习路线

    一.工具篇 “公欲善其事,必先利其器”.编程是一门实践性很强的工作,在你以后的学习或工作中,你将常常会与以下工具打交道, 下面列出学习C语言编程常常用到的软件和工具. 1.操作系统    在UNIX或 ...

  9. Scrum不是万能药，要在时机成熟时推行

    敏捷很火热,大家都在谈敏捷:但不是所有团队都适合敏捷! 需要等待时机,时机成熟了,才推! 什么时候算时机成熟呢? 我们的经验是需要两点: 一.团队有三名或以上的研发工程师 : 二. 团队内有一名合适的 ...

  10. apt-get

    更新版本: apt-get --reinstall install apache2 卸载: apt-get remove apache2          只删除软件包 apt-get autorem ...