Css3+jquery make 3d Rotate album < turn >

Css3+jquery making 3d Rotating albums

First look at today's cool effect:

First Analyze This picture:

1. Every picture has a reflection

2. These 11 images are rounded and evenly arranged

3. Can rotate, move up and down (of course, this is the effect after the image is not analyzed)

Let's get down to it.

One. Get ready

Create a new three folder named Css,js,img respectively to store demo.css,jquery.js, demo.js,11 Zhang Xi example Pictures. The new demo.html introduces Demo.css,jquery.js,demo.js.

Two. Image reflection making

1 <div id= "wrap" > 2      3      4      5      6      7      8      9     10     11 12     13 </div>

First we create a large div to wrap these 11 images

*{    padding:0;    margin:0;} body{    background: #000;    Overflow:hidden;} #wrap {    width:133px;    height:200px;    margin:200px Auto;    position:relative;    transform-style:preserve-3d;    Transform:perspective (900px) Rotatex ( -10deg) Rotatey (0deg);} #wrap img{    Position:absolute;    top:0;    left:0;    box-shadow:0 0 10px #FFFFFF;    border-radius:10px;    Box-reflect:below 8px linear-gradient (Top,rgba (0,0,0,0) 40%,rgba (0,0,0,.7) 100%);    -webkit-box-reflect:below 8px-webkit-linear-gradient (Top,rgba (0,0,0,0) 40%,rgba (0,0,0,.7) 100%);}

(1) * Here is not much to say, is to eliminate the default browser spacing.

(2) The Body property set the background color is black, overflow hidden (here is mainly to avoid the scroll bar affect the overall effect of the picture).

(3) #wrap它的宽高大家一定很好奇为什么会那么小, his width is equal to a picture of the width of the high, here is to make the post-production rotation when it can be rotated by the picture itself without deviation (here people do not understand, you can write all the code after the set a larger value, try to know OH).

Margin is mainly to let the picture horizontal center distance up and down 200px.

Transform-style:preserve-3d is mainly to let the picture show the 3d effect.

Transform:perspective (900px) [This property sets the distance from the lens to the element plane (if you don't understand it, remember that this is the use of near-large and small reason later can adjust his size experiment Oh)] Rotatex ( -10DEG) [ Rotate -10°] Rotatey around the x-axis [0deg] [rotate 0° around the y-axis]. Tell us a simple and easy way to draw a planar Cartesian coordinate system, which is very intuitive.

(4) #wrap img Specifies the img attribute inside the #wrap, and the front absolute positioning is to make all the pictures overlap.

The Box-shadow setting sets his shadow effect

Border-radius set its fillet size

Box-reflect set its reflection effect

Here is not too much to state the use of the CSS3 attribute, you can see in the audience.

Two. Distribute the picture evenly

$ (function () {    $ (' #wrap img '). Each (function (i) {        //traversal $ (' #wrap img ')----change their CSS style        $ (this). CSS ('　　Transform ', ' rotatey (' + i*deg + ' Deg) Translatez (350px) '). attr (' ondragstart ', ' return false ');    Rotation and no drag-and-drop Replication    });})    

If you have questions about setting CSS properties, think of it this way: Translatez (350px) sets the distance of the z-axis, sees him as a circle with a radius of 350px (0,0), and distributes the picture evenly across the circle.

This sets the properties of the image to prohibit dragging, and it echoes the HTML page we need to add this property

If you don't add this, the page will get an error. Of course, if not added does not affect the current picture display, but will affect the following to do the rotation of the picture.
So far, the effect on the picture is shown, but now it's stiff, no animation, just static display.
Three. Rotate, move pictures
Ideas:
When the mouse presses and slides the whole of wrap is also sliding, so you need to record the mouse start to the end of the position, according to the difference between the x-axis and the y-axis of the mouse, calculate the size of the #wrap need to rotate and move
 $ (function () {var IMGL = $ (' #wrap img '). length;     Gets the current img length var Deg = 360/IMGL;     360/IMGL and angles are related to var RoY = 0,rox = -10,xn,yn;       $ (document). MouseDown (EV) {//bind event when the mouse is pressed, the time var x_ = Ev.clientx;       Gets the position of the current mouse relative to the x direction of the browser page (or client area) stored in the variable x_ var y_ = Ev.clienty; .... The position of the Y-direction is saved in the variable Y_ $ (this). bind (' MouseMove ', function (EV) {//) binds the current element (the current element here is document) MouseMove (the mouse is in the current       　　The event that is moved within the element) var x = Ev.clientx;       　　Gets the position of the current mouse relative to the x direction of the browser page (or client area) saved in variable x var y = ev.clienty;         　　... the position of the Y-direction is saved in the variable y XN = x-x_;;       　　Calculates the x-axis distance of the mouse within the current element relative to the last mouse click and saves the variable YN = y-y_;          Calculates the y-axis distance of the mouse within the current element relative to the last mouse click and saves the variable RoY + = xn*0.2;           According to the proportional conversion and increase on the basis of the variable (around the y-axis rotation angle, the reason is multiplied by 0.2 is to not let their mouse action too sensitive, you can change the numerical test, understand the meaning) RoX +=yn*0.07; Proportional conversion and increment on variable basis (the angle of rotation around the x-axis, meaning ibid.) $ (' #wrap '). CSS (' transform ', ' Perspective (800px) Rotatex (' + RoX + ' deg) Rotatey ( ' + RoY+ ' deg) '); $ (' #wrap ') change the CSS animation transform style value to ...           The angle is x_ of variable roy,rox = Ev.clientx;           and set the position of the mouse down to the position currently moved to Y_ = Ev.clienty;  and set the position of the mouse down to the position currently moved to});     }). MouseUp (function () {///bind event The time that is triggered when the mouse is released (this). Unbind (' MouseMove '); Removes the current element (the current element here is document) MouseMove (the mouse moves within the current element)});
});
Note is clear, here is not too much to repeat, to now can see the effect, hold down the left mouse button to drag up and down to try it.
But so far see the effect is very blunt, not smooth, so for him to add a timer, to let the picture really turn up.
　　　　$ (function () {var IMGL = $ (' #wrap img '). Size ();            Gets the current IMG length Console.log ($ (' #wrap img '). Size ());             var Deg = 360/IMGL;             360/IMGL and angles are related to var RoY = 0,rox = -10,xn,yn,play=null; Assign a value of $ (' #wrap img '). Each (function (i) {//Traversal $ (' #wrap img ')----change their CSS style $ (this).                S (' Transform ', ' rotatey (' + i*deg + ' Deg) Translatez (350px) '). attr (' ondragstart ', ' return false ');           Rotation and no drag copying});                $ (document). MouseDown (EV) {//bind event when the mouse is pressed and the time clearinterval (play) is triggered;                Off timer (play) var x_ = Ev.clientx;                Gets the position of the current mouse relative to the x direction of the browser page (or client area) stored in the variable x_ var y_ = Ev.clienty;  ... the position of the Y-direction is saved in the variable Y_ $ (this). bind (' MouseMove ', function (EV) {//) binds to the current element (where the current element is document) MouseMove (event that the mouse moves within the current element) Varx = Ev.clientx;                    Gets the position of the current mouse relative to the x direction of the browser page (or client area) saved in variable x var y = ev.clienty;                      ... the position of the Y-direction is saved in the variable y XN = x-x_;;                    Calculates the x-axis distance of the mouse within the current element relative to the last mouse click and saves the variable YN = y-y_;                    Calculates the y-axis distance of the mouse within the current element relative to the last mouse click and saves the variable RoY + = xn*0.2;                     Increase the RoX +=yn*0.07 according to the proportional conversion and on the basis of variables;  Scale and add $ (' #wrap ') based on the variable. CSS (' transform ', ' Perspective (800px) Rotatex (' + RoX + ' deg) Rotatey (' + "RoY                     + ' deg) '); $ (' #wrap ') change the CSS animation transform style value to ...                     The angle is x_ of variable roy,rox = Ev.clientx;                     and set the position of the mouse down to the position currently moved to Y_ = Ev.clienty;            and set the position of the mouse down to the position currently moved to});                }). MouseUp (function () {///bind event The time that is triggered when the mouse is released (this). Unbind (' MouseMove '); Removes the current element (the current element here is the Document) MouseMove (event that the mouse moves within the current element) play = SetInterval (function () {//Start periodic timer                    XN = XN * 0.95;                    Proportional conversion YN = YN * 0.95; Proportional Conversions if (Math.Abs (XN) <= 0.5 && math.abs (YN) <= 0.5)//judgment (XN's Absolute                        <=0.5) and the absolute value of yn <= 0.5), execute the following statement {clearinterval (play);                     Turn off timer (play)} RoY + = xn*0.2;                    Increase the RoX +=yn*0.07 according to the proportional conversion and on the basis of variables;  Scale and add $ (' #wrap ') based on the variable. CSS (' transform ', ' Perspective (800px) Rotatex (' + RoX + ' deg) Rotatey (' + "RoY                    + ' deg) '); $ (' #wrap ') change the CSS animation transform style value to ...                The angle is the},30 of the variable Roy,rox);        Timer is triggered every 30 milliseconds}); });
Css3+jquery make 3d Rotate album < turn >