Title

@[CSS3实现3D球体运动](这里写自定义目录标题) # 实现思路本案例主要实现两个功能： - 鼠标拖拽使球体旋转； - 鼠标轮滚动进入球体内部； ## 核心：球体形成思路 ##### html

组成球体的一个个小长方形

##### 原理 - 把球体分为一层一层，以直径这层为基础，给其加上样式transform:rotateX()，区间为[-90ded,90deg]，注意，**层数*每一层旋转角度 = 90deg** 由此一层一层的组成一个球体; - **球体直径这层如何形成**：若干个长方形，叠加在一起（**绝对定位**），每一个都加上样式：transform:rotateZ(radius) transformY(radius/长方形数量)；注意**长方形沿Y轴旋转角度**为 **360/数量*所在位置** 即形成以radius为半径的圆环； *以上涉及物理空间想象，必要时请画图作以辅助* - 数量过多，可利用js组件DOM(这里引入jquery) //这个函数为创建半个圆，half为1时创建半圆，为-1创建下半圆 function half(flag) { for (var i = 0; i < framefloor[j]; i++) { $("

").css( { **//!!!!!!!!!!注意这里非常非常重要必须先X后Y 先变化x在变化Y 和先变化Y在变化X 最后呈现的是两种不同的结果!!!!!!!!!!!!!!!!!!!!** "transform":"rotateY(" + 360 / framefloor[j] * i + "deg) rotateX(" + 90/(floor-1) * j*flag + "deg) translateZ("+ r+"px)", "background" : "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")" } ).appendTo($unit); } } - .unit是运动单元，即球体之后的运动和拉伸以它为主体。 - 呈现3d效果时，要在运动元素的父元素上加上**perspective**属性。这个属性的含义，我的理解是，假设屏幕外你的眼睛是定点，perspective的值即是你的眼睛到图像的距离。所以，首先.unit和.stage得加上perspective属性。 ##### 事件 - “**滚动鼠标进入球体内部原理**”：鼠标滚动时改变.stage的perspective属性值，当其小于球体半径时，即出现进入到球体内部的效果 $document.mousewheel(function (event,delta) { //滚轮向上滚 delta值为-1 向下值为1 //阻止鼠标滚轮的默认事件 event.preventDefault(); $(".stage").css({ "perspective": (a-=delta*15) + "px", }) }) - **拖拽鼠标球体旋转**： var drag=function(obj){ $document.bind("mousedown",start); function start(event){ if(event.button==0){//判断是否点击鼠标左键 /* * clientX和clientY代表鼠标当前的横纵坐标 * bind()绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在 */ //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的 gapx = event.clientX; gapy = event.clientY; $(document).bind("mousemove",move); //此处的$(document)可以改为obj $(document).bind("mouseup",stop); } return false;//阻止默认事件或冒泡 } function move(event){ console.log(event.clientX) console.log(event.clientY) obj.css({ "transform":"rotateX("+(event.clientX-gapx)/10+"deg) rotateY("+(event.clientY-gapy)/10+"deg)", }); return false;//阻止默认事件或冒泡 } function stop(){ //解绑定，这一步很必要 $(document).unbind("mousemove",move); $(document).unbind("mouseup",stop); } } drag($unit);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数 ## 完整代码 Title