基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性
从而通过改变transform：rotate属性值来达到3d立方体旋转的效果
HTML代码块：
<body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" value=""/>//X轴旋转角度 <input type="text" class="yNum" value=""/>//Y轴旋转角度 <input type="text" class="zNum"/> <div class="big_box"> <div class="box"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body>
CSS代码块：
<style>
body{cursor: url("img/openhand1.png"),auto;}
.big_box{
width: 500px;
height: 500px;
margin: 200px auto;
}
.box{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin:100px 100px 00px;
position: relative;
transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);
}
.box span{
transition: all 1s linear;
}
span{
display: block;
position: absolute;
width: 200px;
height: 200px;
box-sizing: border-box;
border:1px solid #999;
/*opacity: 0.7;*/
text-align: center;
line-height: 200px;
font-size: 60px;
font-weight: 700;
border-radius: 12%;
}
.box span:nth-child(1){
background-color: deepskyblue;
transform-origin: left;
transform: rotatey(-90deg) translatex(-100px);//左
}
.box span:nth-child(2){
background-color: red;
transform-origin: right;
transform: rotatey(90deg) translatex(100px) ;//右
}
.box span:nth-child(3){
background-color: green;
transform-origin: top;
transform: rotatex(90deg) translatey(-100px) ;//上
}
.box span:nth-child(4){
background-color: #6633FF;
transform-origin: bottom;
transform: rotatex(-90deg) translatey(100px);//下
}
.box span:nth-child(5){
background-color: gold;
transform: translatez(-100px);//后
}
.box span:nth-child(6){
background-color: #122b40;
transform: translatez(100px);//前
}
.box:hover span{
opacity: 0.3;
}
.box:hover{
animation-play-state:paused;//设置动画暂停
}
</style>
JS代码块：
<script>
move();
clickBox();
//鼠标按下且移动时触发，
function move(){
var body = document.querySelector("body");
var box = document.querySelector(".box");
var xNum =document.querySelector(".xNum");
var yNum =document.querySelector(".yNum");
var x = 0,y = 0,z = 0;
var xx = 0,yy = 0;
var xArr = [],yArr = [];
window.onmousedown = function (e) {//鼠标按下事件
body.style.cursor = 'url("img/closedhand1.png"),auto';
xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标
yArr[0] = e.clientY/2;
window.onmousemove = function (e) {//鼠标移动事件————当鼠标按下且移动时触发
xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标
yArr[1] = e.clientY/2;
yy += xArr[1] - xArr[0];//获得鼠标移动的距离
xx += yArr[1] - yArr[0];
xNum.value = xx+"°";//将所获得距离数字赋值给input显示旋转角度
yNum.value = yy+"°";
//将旋转角度写入transform中
box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";
xArr[0] = e.clientX/2;
yArr[0] = e.clientY/2;
}
};
window.onmouseup = function () {//鼠标抬起事件————用于清除鼠标移动事件，
body.style.cursor = 'url("img/openhand1.png"),auto';
window.onmousemove = null;
}
}
//点击事件、负责立方体盒子的六面伸展
function clickBox(){
var btn = document.querySelector(".open");
var box = document.querySelector(".box");
var son = box.children;
var value = 0;
//存储立方体散开时的transform参数
var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];
//存储立方体合并时的transform参数
var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];
btn.onclick = function(){
if(value == 0){
value = 1;
btn.value = "点击合并";
for(var i=0;i<arr1.length;i++){
son[i].style.transform = arr1[i];
console.log(son[i])
}
}else if(value == 1){
value = 0;
btn.value = "点击散开";
for(var j=0;j<arr0.length;j++){
son[j].style.transform = arr0[j];
console.log(j);
}
}
};
}
</script>
以上所述是小编给大家介绍的基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转 的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
js CSS3实现卡牌旋转切换效果
我们经常会在游戏里看到一些几张卡牌左右切换的效果,中间的一张最突出醒目,向左或向右滑动可切换到另一张,今天我们就用CSS3来实现下这种效果. 我们先来看个demo,具体的样式各位可以自己调整: (PC下可点击按钮切换,移动端可左右滑动切换) 从效果上我们可以看到,这5个div可以左右的切换,每次切换时总会有一个在中间显眼的位置进行展示.在切换时,看起来是div进行了移动,进行了DOM的增删操作.但是如果审查下元素,就能看到,DOM元素没有变换位置,它依然在那个位置,我们只是切换了每个元素上的cl
-
js+css3实现旋转效果
我的前面一张文章实现了用css3制作旋转的效果,现在呢,我换另外一种方法来实现.就是使用js结合css3的方法来实现的.下面我就先上图给大家看看效果吧 下面呢我先放上我的css代码,代码很简单: .one{ width:200px; height: 200px; border:1px solid #adadad; transition:all 0.1s; border-radius:50%; background:url(images/1.jpg) no-repeat center center
-
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo
-
基于JS实现简单的3D立方体自动旋转
目录 演示 技术栈 源码 css js 雪花部分 演示 技术栈 display:inline-block,block,inline元素的区别: display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始. display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变.多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行. display:inline
-
原生JS实现鼠标滑动撒爱心特效
本文实例为大家分享了一个鼠标滑动撒爱心的js特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
使用jQuery或者原生js实现鼠标滚动加载页面新数据
相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据 都可以. 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(t
-
原生js实现可拖动的登录框效果
实现原理 1.onmousemove事件触发时不断更新鼠标的pageXY改变位置, 登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离 2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽 3.onmouseup 鼠标弹起设置false停止拖拽 4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2 5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示 代码中有详细的注释 完整代码 <!DOCTYPE html PUBL
-
原生js实现鼠标跟随效果
话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标跟随效果</title> <style type="text/css"> *{margin: 0;padding: 0;} img{position:absolute;top:0;left:0;} &
-
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
注意使用preventDefault防止浏览器的默认事件操作发生 复制代码 代码如下: <script language="javascript" type="text/javascript"> var isDrag = false; function isIE(){ if(navigator.userAgent.indexOf("MSIE")>0){return true;} else{return false;} } fun
-
js实现鼠标拖动功能
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 200px; height: 200px; background: green; position: absolute; } #div2{ width:
-
原生JS和jQuery操作DOM对比总结
一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("He
-
JS实现鼠标按下拖拽效果
原生JS实现鼠标按下拖拽效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&qu