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:;
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立体旋转的更多相关文章
- css3立体旋转菜单
css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...
- css3立体旋转动画
demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...
- 纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
- CSS3实现旋转的太极图(二):只用1个DIV
效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...
- CSS3绘制旋转的太极图案(一)
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
随机推荐
- 使用Git进行代码管理的心得
使用GitHub进行代码托管的方法 我是直接下载 Github for Windows ,这个软件自带一个 Github 客户端 和一个 Git shell,其中Github是图形化界面,对初学者来说 ...
- C#窗体 WinForm 进程,线程
一.进程 进程是一个具有独立功能的程序关于某个数据集合的一次运行活动. 它可以申请和拥有系统资源,是一个动态的概念,是一个活动的实体. Process 类,用来操作进程. 命名空间:using Sys ...
- Linux服务器数据库的导入和导出
一.导出: 用mysqldump命令行 命令格式 mysqldump -u 用户名 -p 数据库名 > 数据库名.sql 范例: mysqldump -u root -p abc > ab ...
- WEB UI 整理
当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同浏览器的兼容性也不需要程序员操心,有了这些优点,当然大家 ...
- [整]C#获取天气预报信息(baidu api)包括pm2.5
/// <summary> /// 获取天气预报信息 /// </summary> /// <returns></returns> public Bai ...
- iOS开发UI篇—iPad开发中得modal介绍
iOS开发UI篇—iPad开发中得modal介绍 一.简单介绍 说明1: 在iPhone开发中,Modal是一种常见的切换控制器的方式 默认是从屏幕底部往上弹出,直到完全盖住后面的内容为止 说明2: ...
- eclipse 闪退
在eclipse.ini文件中加入 -Dorg.eclipse.swt.browser.DefaultType=mozilla
- .htaccess根据IP地址限制访问
屏蔽IP地址 屏蔽IP地址有时是非常必要的,比如对于一个外贸公司网站,来自国内的访问是不会带来任何经济效益的,而且还占用服务器资源,造成访问延迟等问题. 如果要屏蔽某一特定IP可以使用: order ...
- Codeforces Round #379 (Div. 2) 解题报告
题目地址 本次CF是在今天早上深夜进行,上午有课就没有直接参加.今天早上上课坐到后排参加了virtual participation.这次CF前面的题目都非常的水,不到10分钟就轻松过了前两题,比较郁 ...
- android studio 改变代码提示的方法
移通152余继彪 在android studio中 默认代码提示的功能是ctrl+空格,这样的提示会和输入法造成冲突,所以要改变 改变的方法就是file—seting——Keymap然后搜索basic ...