Jquery + CSS3 implements 3D drag-and-drop album effects, jquerycss3

Jquery + CSS3 implements 3D drag-and-drop album effects, jquerycss3

A practice that has been practiced for a long time ago. After reviewing the gradient, rounded corner, 3D deformation, drag and drop to view the source code, it is estimated that it will not be too messy (◎ ﹏ ◎) hahaha

:

HTML:

<! Doctype html> 
CSS:
* {Margin: 0; padding: 0;} body, html {background: #000 ;}. pic {width: 120px; height: 180px; margin: 150px auto 0; border: 1px solid red; position: relative; transform-style: preserve-3d; /* set the 3D environment * // * perspective: 800px; do not use this */transform: perspective (800px) rotateX (-10deg) rotateY (0deg );}. pic img {position: absolute; height: 100%; width: 100%; border-radius: 5px; box-shadow: 0 0 10px # fff;/* Background gradient effect! Important */-webkit-box-reflect: below 10px-webkit-linear-gradient (top, rgba (80%, 100%), rgba );}. pic p {width: pixel PX; height: pixel PX;/* radioactive background gradient */background:-webkit-radial-gradient (center, 400px 400px, rgba (255,255,255, 0.2 ), rgba (50%, 100%); position: absolute; left:; top:;/* Move back position */margin-left:-600px; margin-top: -600px; transform: rotateX (90deg); border-radius: 600px ;}
JQ:
$ (Function () {var imgL = $ ("div. pic img "). size (); // The total number of images retrieved // alert (imgL); var deg = 360/imgL; // the angle from which each image needs to rotate var roY = 0, roX = 0; // defines the initial value of the parent box rotation var xN, yN; // defines the distance between the coordinates of the current click and the previous coordinates var play; // defines the timer $ ("div. pic img "). each (function (I) {// set the 3D position of each image watermark (this).css ({"transform": "rotateY (" + I * deg + "deg) translateZ (350px) "}); $ (this ). attr ("ondragstart", "return false"); // drag prohibited for each image}); $ (document ). mousedown (function (ev) {// clear the timer each time to prevent confusion clearInterval (play); // obtain the coordinates var x _ = ev at the current click. clientX; var y _ = ev. clientY; $ (this ). bind ("mousemove", function (ev) {// obtain the Moving Coordinate var x = ev. clientX; var y = ev. clientY; // the difference between the current coordinate and the previous coordinate after moving is obtained. xN = x-x _; yN = y-y _; // convert the distance difference to the container rotation value roY + = xN * 0.2; roX-= yN * 0.1;/* $ ("body "). append ("<div style = 'background: red; width: 5px; height: 5px; position: absolute; top:" + y + "px; left: "+ x +" px; '> </div> "); this shows the effect easily */$ (" div. pic "2.16.css ({" transform ":" perspective (800px) rotateY ("+ roY +" deg) rotateX ("+ roX +" deg )"}); // set the moved vertex to the first vertex and store it in the x _, y _ variable x _ = ev. clientX; y _ = ev. clientY ;})}). mouseup (function () {// when the mouse is lifted, unbind the mouse to move the event $ (this ). unbind ("mousemove"); // when the mouse is lifted up, implement the inertial Buffer Effect play = setInterval (function () {// gradually decrease the distance interpolation, inertia buffer xN * = 0.95; yN * = 0.95; // when dragging left, the distance between the current point and the previous point is negative, take the absolute value // stop the inertia if (Math. abs (xN) <1 & Math. abs (yN) <1) {clearInterval (play);} // convert the distance difference to the rotation angle roY + = xN * 0.2; roX-= yN * 0.1; $ ("div. pic "2.16.css ({" transform ":" perspective (800px) rotateY ("+ roY +" deg) rotateX ("+ roX +" deg )"});}, 30 );})})
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.