js拖拽3D立方体旋转
这段时间有点闲,所以就自己找些小玩意来练习练习。今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的。
上个图
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
padding: 0;
margin: 0;
}
#experiment{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
}
#cube{
position: relative;
margin: 200px auto;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
cursor: pointer;
}
.face{
position: absolute;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
padding: 20px;
font-weight: bold;
color: #fff;
background: #000;
font-size: 160px;
-webkit-transition: -webkit-transform 1s linear;
opacity: 0.8;
}
.face:nth-child(2){
-webkit-transform-origin: right;
-webkit-transform: rotateY(-90deg);
background: red;
}
.face:nth-child(3){
-webkit-transform-origin: left;
-webkit-transform: rotateY(90deg);
background: yellow;
}
.face:nth-child(4){
-webkit-transform-origin: top;
-webkit-transform: rotateX(-90deg);
background: blue;
}
.face:nth-child(5){
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(90deg);
background: green;
}
.face:nth-child(6){
-webkit-transform: translateZ(-200px);
background: gray;
}
</style>
</head>
<body>
<div id="experiment">
<div id="cube">
<div class="face" id="face1"></div>
<div class="face" id="face2"></div>
<div class="face" id="face3"></div>
<div class="face" id="face4"></div>
<div class="face" id="face5"></div>
<div class="face" id="face6"></div>
</div>
</div> <script>
document.onmousedown= function(event){
var that = document.getElementById('cube');
var reg = /\-?[0-9]+\.?[0-9]*/g;
var bf = that.style.webkitTransform || '0,0';
var arr = bf.match(reg);
var bfX = Number(arr[0]);
var bfY = Number(arr[1]);
var startX = event.pageX;
var startY = event.pageY;
document.onmousemove= function(event) {
var disX = event.pageX - startX ;
var disY = event.pageY - startY ;
var y=(disX+bfY)%360;
var x=(disY+bfX)%360;
that.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ(0deg)";
}; document.onmouseup=function(event) {
document.onmousemove=null;
document.onmouseup=null;
};
return false;
} </script>
</body>
</html>
js拖拽3D立方体旋转的更多相关文章
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3-实现3D立方体旋转
核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- js拖拽分析
js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...
随机推荐
- 开启AsyncTask从网络加载图片
/*AsyncTask 异步任务即做一些简单的异步处理 :是handle与线程池的封装 * 第一个泛型:参数类型泛型 * 第二个泛型:更新进度泛型 * 第三个泛型:onProgressUpdate的返 ...
- C++模拟Java“内部”类
代码思路来自Thinking in C++ 10.13.1内部类方法.类似多重继承,但是类型转换是单向的:Outer支持“向上”转型,但是不能“向下”转型回Outer. #include <io ...
- leetcode题解: Remove Duplicates from Sorted List(已排序单链表去重)
题目: Given a sorted linked list, delete all duplicates such that each element appear only once. For e ...
- ASP.NET FormsAuthentication跨站点登录时绝对地址返回的问题
关键字:FormsAuthentication, loginUrl, ReturnUrl, AbsoluteUri 在ASP.NET应用程序中,FormsAuthentication几乎是标配,但Fo ...
- PHP 错误处理机制
在日常的项目开发过程中,总是会出现一些我们意想不到的异常错误,如果我们对此没有进行相对完善的处理,那么程序看上去也很不专业,也很可能就会成为别人攻击系统的有效信息:有些错误异常会终止脚本执行,这个时候 ...
- C++构造/析构/赋值函数
在编写C++程序的时候,我们会为特定某一类对象申明类类型,几乎我们申明的每一个class都会有一个或多个构造函数.一个析构函数.一个赋值运算符重载=.以及拷贝构造函数.这些函数控制着类对象的基础操作, ...
- jQuery选择器之动态列表显示Demo
显示效果: 之后全部展开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 常用字符串API
java.lang.string.1.0 1.char charAt(int index) 返回给定位置的代码单元. 2.int codePointAt(int index) 返回从给定位置开始或字 ...
- Table of Contents - HTTP
HTTP 报文 HTTP 方法 HTTP 状态码 HTTP 首部 连接管理 持久连接 Cookie 机制 Session 机制 基本认证机制 在 Tomcat 中设置基本认证 摘要认证 在 Tomca ...
- CSS导航指示箭头
效果图 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...