<!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. C++ const、volatile、mutable的用法 (转)

      const.volatile.mutable的用法 鸣谢作者: http://blog.csdn.net/wuliming_sc/article/details/3717017 const修饰普通 ...

  2. 读javascript高级程序设计03-函数表达式、闭包、私有变量

    一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); functi ...

  3. PDF解析

    解析如下图PDF文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  4. .htaccess简介和详解

    .htaccess文件(或者”分布式配置文件”)提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作为用户,所能使用的命令受到 ...

  5. android单选框和复选框(练习)

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  6. Nullable<>

    Nullable<>是一个结构,但是怎么能让此结构=null,这是编译器的一个比较特殊的,他会new一个该结构的实例去赋值.Nullable<>有一个属性是HasValue,是 ...

  7. spark0.9.1 assembly build-RedHat6.4 YARN 2.2.0

    1. Install git on RedHat6.4: 1.1. setup your local yum repo 1.2. yum install git 2. Install JDK and ...

  8. tinyXML的用法,用于解析gpx文件

    tinyxml是一个开源的C++xml解析工具集,简单.轻量而又高效,所以对于处理xml文件是一个非常不错的选择. 由于它开源,所以可以方便地免费下载,下载地址百度一下很容易找到,这里就不多说了. 下 ...

  9. innerHTML,innerText,outHTML,outText区别

    <p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;& ...

  10. BFC and Haslayout

    一.BFC(Block Formatting Context) 相关网址:http://www.cnblogs.com/dolphinX/p/3508869.html 1. 怎样才能形成BFC flo ...