基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

zhezhongyun 2025-08-02 22:43 16 浏览

基于css3新属性transform，实现3d立方体的旋转

通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示

实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性

从而通过改变transform：rotate属性值来达到3d立方体旋转的效果

HTML代码块：

<body>
    <input type="button" class="open" value="点击散开"/>
    <input type="text" class="xNum" value="0"/>//X轴旋转角度
    <input type="text" class="yNum" value="0"/>//Y轴旋转角度
    <input type="text" class="zNum"/>
    <div class="big_box">
        <div class="box">
 <span>1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 <span>5</span>
 <span>6</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)",
"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"]; //存储立方体合并时的transform参数 var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",
"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>

text-transform 属性

上一篇：记录一些Robolectric比较常用的方法
下一篇：零基础学编程(hover)

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）