CSS3实现3D球体运动

@CSS3实现3D球体运动

实现思路

本案例主要实现两个功能：

• 鼠标拖拽使球体旋转；
• 鼠标轮滚动进入球体内部；

核心：球体形成思路

html

  <div class="stage">
  	<div class="unit">
  	//<div class=".ball"> 组成球体的一个个小长方形
  	</div>
  </div>

原理

• 把球体分为一层一层，以直径这层为基础，给其加上样式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++) {
                 $("<div class='ball'></div>").css(
                     {
                         **//!!!!!!!!!!注意这里 非常非常重要 必须先X后Y  先变化x在变化Y  和先变化Y在变化X 最后呈现的是两种不同的结果!!!!!!!!!!!!!!!!!!!!**
                         "transform":"rotateY(" + 360 / framefloor[j] * i + "deg) rota