@cSS3 achieve 3D sphere movement

Implementation approach

This case mainly realizes two functions:

  • Mouse drag makes the sphere rotate;
  • The mouse wheel rolls into the inside of the sphere;

Core: Sphere formation idea

html
<div class="stage"> <div class="unit"> //<div class=".ball">Copy the code
The principle of
  • Transform :rotateX(), the interval is [-90DED,90deg]. Note that the number of layers * rotation Angle of each layer = 90deg. Therefore, a sphere is formed layer by layer.
  • How this layer is formed: several rectangles, superimposed on top of each other (absolute positioning), each with a style: transform:rotateZ(radius) transformY(radius/ number of rectangles); Note that the Angle of rotation of the rectangle along the Y-axis is 360/ quantity *, that is, the position of the rectangle is formed with radius as the radius.

The above involves physical space imagination, please draw pictures to assist if necessary

  • Too many, use js component DOM(jquery introduced here)

    Function half(flag) {for (var I = 0; function half(flag) {for (var I = 0; i < framefloor[j]; i++) { $("<div class='ball'></div>").css( { **//!!!!!!!!!! Notice that it's very, very important that you have to change X before Y and X before Y and you have to change Y and you have to change 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); }}Copy the code

  • .unit is the unit of motion, which is the main body of the motion and stretching after the sphere.

  • When rendering a 3D effect, add the perspective attribute to the parent of the motion element. The meaning of this property, as I understand it, is that the value of the perspective is the distance from your eyes to the image, assuming that your off-screen eyes are the fixed point. So, first,.unit and.stage have to add perspective attributes.

The event

  • “Rolling the mouse into the inside of the sphere” : The perspective attribute value of stage changes when the mouse is rolling. When it is smaller than the radius of the sphere, the effect of entering the inside of the sphere will appear

    $document.mousewheel(function (event,delta) {// preventDefault event.preventdefault (); $(".stage").css({ "perspective": (a-=delta*15) + "px", }) })Copy the code

  • Drag the mouse to rotate the sphere:

    var drag=function(obj){ $document.bind("mousedown",start); Function start(event){if(event.button==0){function start(event){if(event.button==0){ */ / The movemove event must be bound to $(document), the mouse movement is on the entire screen gapx = event.clientx; gapy = event.clientY; $(document).bind("mousemove",move); // obj $(document).bind("mouseup",stop); } return false; Function move(event){console.log(event.clientx) console.log(event.clienty) obj.css({function move(event){console.log(event.clienty) console.log(event.clienty) obj.css({function move(event){console.log(event.clienty) "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); // The object passed in must be a jQuery object, otherwise jQuery's custom functions cannot be calledCopy the code

The complete code

<! DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin:0; padding:0}html,body{height:100%; background:lightgray}.stage{width:100%; height:100%; margin:auto auto; perspective:800px}.unit{width:100%; height:100%; position:relative; transform-style:preserve-3d}.ball{width:100px; height:20px; position:absolute; opacity:.6; top:50%; left:50%; margin-top:-50px; margin-left:-30px; border-radius:50%}</style></head><body><div class="stage"><div class="unit"></div></div><script src=".. / js/jquery - 3.3.1. Min. Js "> < / script > < script SRC =".. /js/jquery.mousewheel.min.js"></script><script>$document = $(document); $unit = $(".unit"); / / the number of small ball components in every layer, write array var framefloor =,22,20,18,18,12,10,8,4,1 [24]; Var floor = framefloor.length; Var a = parseInt($(".stage").css("perspective")); circle(framefloor,350); / / the number of component parameters of each layer (the default is 300) function (array) radius circle (framefloor, r) {/ var/radius r = r | | 300; For (var j=0; j<floor; j++){half(1); if(j == 0) continue; half(-1)}function half(flag){for(var i = 0; i < framefloor[j]; I++){$("<div class='ball'></div>").css({// "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.h random () * 255) +") "}) appendTo ($unit)}}} / var/drag and drop function drag=function(obj){$document.bind("mousedown",start); Function start(event){if(event.button==0){function start(event){if(event.button==0){function start(event){if(event.button==0){ gapy = event.clientY; $(document).bind("mousemove",move); 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); // It must be a jQuery object. Log ($unit) $document.mousewheel(function(event,delta){event.preventdefault (); $(".stage").css({"perspective":(a-=delta*15)+"px",})}) // for(var i = 0; i < 10; i++){// $("<div class=\"ball\"></div>").css({// "transform":"rotateX("+(-45)+"deg) rotateY("+36 * i+"deg) translateZ("+300+"px)",// "background":"rgb("+parseInt(Math.random() * 256)+","+"parseInt(Math.random()*256)"+","+parseInt(Math.random() * 256)+")",//}).appendTo($(".unit")) // $("<div class=\"ball\"></div>").css({// "transform":"rotateX("+(45)+"deg) rotateY("+36 * i+"deg) translateZ("+300+"px)",// "background":"rgb("+parseInt(Math.random() * 256)+","+"parseInt(Math.random()*256)"+","+parseInt(Math.random() * 256)+")",//}).appendTo($(".unit")) //}</script></body></html>Copy the code