css3实现立方体的旋转功能
<!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实现立方体的旋转功能的更多相关文章
- 第102天:CSS3实现立方体旋转
CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- css3通过scale()实现放大功能、通过rotate()实现旋转功能
css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...
- css3实现头像旋转功能(超easy!!!)
简单好玩的头像旋转功能 html结构 <body> <img src="https://a-ssl.duitang.com/uploads/item/201604/29/2 ...
- 纯css3实现的圆形旋转分享按钮
之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...
- 一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能
原文:WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能 对于CAD图形来说,3D旋转比较常用,具体实现方法在上篇文章<WPF中3D旋转的实现 >中做了 ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
随机推荐
- javascript宿主对象之window.location
location属性是一个用来存储当前页面URL信息的对象. 下面我们通过循环来列出location对象的完整属性列表: for(var i in location){ if(typeof locat ...
- js阻塞
阻塞指的是暂停一个线程的执行以等待某个条件发生(如某资源就绪),JS单线程避免阻塞方法: 1.sleep()方法:sleep()允许指定以毫秒为单位的一段时间作为参数,使得线程在指定的时间内进入阻塞状 ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q131-Q132)
Question 131You create a SharePoint site by using the Document Center site template.You need to ensu ...
- DownloadManager 的使用
一.基本概念 1.DownloadManager是Android 2.3A (API level 9) 引入的,基于http协议,用于处理长时间下载. 2.DownloadManager对于断点 ...
- i++是否原子操作
i++是否原子操作 不是原子操作.理由: 1.i++分为三个阶段: 内存到寄存器 寄存器自增 回内存 这三个阶段中间都可以被中断分离开. 2.++i首先要看编译器是怎么编译的, 某些编译器比如VC在 ...
- Visual Studio 2013常用快捷键
---恢复内容开始--- 代码选择 1 区域代码选择 按Shift选择整(行)块代码,可配合四个方向键(左右键:选择单个字符,上下键:上下行的当前列).Home(当前行首).End(当前行尾).Pg ...
- IDO分享 | 如何在centos下安装OpenCMS
本次的opencms环境是在两台机器上搭建的. 一台服务器安装mySQL, 一台服务器安装jdk.tomcat.opencms.也可以将jdk.mySQL.tomcat.opencms安装在同一个机器 ...
- Effective Java 67 Avoid excessive synchronization
Principle To avoid liveness and safety failures, never cede control to the client within a synchroni ...
- 数据库相关 sql 语句
1.操作某数据库 use 数据库名称,然后可以操作该数据库下的某张表 2.$res=mysql_query($sql); 该语句如果用在封装的函数体里,则不用传入第二个参数$conn来指定连接,这样才 ...
- 一次简单的MySQL数据库导入备份
任务目的:把现网数据库(MySQL5.5,windows)中的内容导入到测试数据库(MySQL5.1,linux)中 1.由于对MySQL并不熟悉,一上来我先考虑方案是用现成的数据库管理工具来处理.我 ...