CSS 3 + jquery creates a 3d rotating album and css3jquery3d album

CSS 3 + jquery creates a 3d rotating album and css3jquery3d album

First, let's take a look at today's cool effects:

First, analyze the image:

1. Each image has a reflection

2. These 11 images are evenly arranged in a circular shape.

3. It can be rotated and moved up or down (of course, after the effect is made, the image cannot be analyzed)

Let's start.

I. Preparation

The three new folder names are CSS, js, IMG, demo.css, jquery. js, demo. js, and 11 sample images. Demo.html introduces demo.css, jquery. js, and demo. js.

II. Image reflection

 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 the 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) * I will not talk about it here. It is to eliminate the default padding of the browser.

(2) set the background color to black in the body property and overflow to hide the background (this is mainly to prevent the scroll bar from affecting the overall effect of the image ).

(3) # The width and height of wrap must be curious about why it is so small. Its width and height are equivalent to the width and height of an image, this is to enable the post-production rotation to rotate the image without any deviation (if you do not understand it, you can set a large value after writing all the code, try it ).

Margin is mainly used to make the image horizontally centered up or down 200px.

Transform-style: preserve-3d is mainly used to show the 3d effect of images.

Transform: perspective (900px) [This attribute sets the distance from the lens to the Element PLANE (if you do not understand it well, remember that this is an experiment that can be adjusted later by using the principle of "near, large, and small")] rotateX (-10deg) [rotate around the X axis-10 °] rotateY (0deg) [rotate around the Y axis 0 °]. It is very intuitive to draw a plane Cartesian coordinate system.

(4) # wrap img specifies the img attribute in # wrap. The previous absolute positioning aims to overlap all images.

Box-shadow sets the shadow effect.

Border-radius sets the rounded corner size.

Box-reflect sets its reflection effect

The usage of the css3 attribute is not described here. You can view it at w3c.

II. Evenly distribute images

$ (Function () {$ ('# wrap img '). each (function (I) {// traverse $ ('# wrap img') ---- change their css style transform (this).css ('transform ', 'rotatey ('+ I * Deg + 'deg) translateZ (350px )'). attr ('ondragstart', 'Return false'); // rotate and prohibit drag/drop copying });})

If you have any questions about setting the css attribute, you can think like this: translateZ (350px) sets the distance of the Z axis and regards it as a circle with () as the center and PX as the radius, evenly distribute the image on the circle.

The drag-and-drop prohibition attribute is set here. In response, this attribute is added to the html page we need.

If this parameter is not added, an error is returned. Of course, if this parameter is not added, the current image display will not be affected, but the image rotation will be affected.
So far, the effect on the image is displayed, but it is now stiff, no animation, just static display.
3. Rotating and moving images
Ideas:
When the mouse is pressed and sliding, the overall wrap is also sliding, so you need to record the starting and ending positions of the mouse, according to the difference between the X axis and the Y axis of the mouse, calculation # size of the wrap to be rotated and moved
$ (Function () {var imgL = $ ('# wrap img '). length; // obtain the current img length var Deg = 360/imgL; // 360/imgL is related to the angle var roY = 0, roX =-10, xN, yN; $ (document ). mousedown (function (ev) {// The time when the mouse is pressed to bind the event var x _ = ev. clientX; // obtain the position of the current mouse relative to the x direction of the browser page (or customer area) and save it in the variable x _ var y _ = ev. clientY ;//.................. The position in the y direction is saved in the variable y _ $ (this ). bind ('mousemove ', function (ev) {// bind the current element (here the current element is document) to the mousemove (the event where the mouse moves within the current element) var x = ev. clientX; // obtain the position of the current mouse relative to the x direction of the browser page (or customer area) and save it in the variable x var y = ev. clientY ;//.................. The position in the y direction is stored in the variable y xN = x-x _; // calculate the distance between the mouse and the X axis when the mouse is pressed in the current element and save it in the variable yN = y-y _; // calculate the distance from the Y axis when the mouse is pressed over the current element and save it to the variable roY + = xN * 0.2; // proportional conversion and increase the value based on the variable (the angle of rotation around the Y axis is multiplied by 0.2 to prevent your mouse action from being too sensitive. You can change the value and try to understand the meaning) roX + = yN * 0.07; // proportional conversion and addition of the variable (angle of rotation around the X axis, which is the same as above) ('{wrap'}.css ('transform', 'spective (800px) rotateX ('+ roX + 'deg) rotateY (' + roY + 'deg) '); // $ (' # wrap ') change the transform style value of the css animation ............ The angle is roY, and x _ = ev of roX. clientX; // set the cursor position to y _ = ev. clientY; // set the cursor position to the current position });}). mouseup (function () {// The time when the mouse is released when the binding event is triggered $ (this ). unbind ('mousemove '); // remove the mousemove of the current element (here the current element is document) (the event where the mouse moves within the current element )});
});
The comment is very clear, so I will not go into details here. Now we can see the effect. Hold down the left mouse button and drag it up and down to try it.
However, the effect shown so far is very stiff and not smooth. Therefore, we need to add a timer for him to make the image rotate.
$ (Function () {var imgL = $ ('# wrap img '). size (); // obtain the current img length console. log ($ ('# wrap img '). size (); var Deg = 360/imgL; // 360/imgL has a relationship with the angle var roY = 0, roX =-10, xN, yN, play = null; // assign a value to $ ('# wrap img '). each (function (I) {// traverse $ ('# wrap img') ---- change their css style transform (this).css ('transform ', 'rotatey ('+ I * Deg + 'deg) translateZ (350px )'). attr ('ondragstart', 'Return false'); // rotate and prohibit drag/drop copying}); $ (document ). mousedown (fu Nction (ev) {// The time when the mouse is pressed to bind the event clearInterval (play); // The time when the timer (play) var x _ = ev. clientX; // obtain the position of the current mouse relative to the x direction of the browser page (or customer area) and save it in the variable x _ var y _ = ev. clientY ;//.................. The position in the y direction is saved in the variable y _ $ (this ). bind ('mousemove ', function (ev) {// bind the current element (here the current element is document) to the mousemove (the event where the mouse moves within the current element) var x = ev. clientX; // obtain the position of the current mouse relative to the x direction of the browser page (or customer area) and save it in the variable x var y = ev. clientY ;//.................. The position in the y direction is stored in the variable y xN = x-x _; // calculate the distance between the mouse and the X axis when the mouse is pressed in the current element and save it in the variable yN = y-y _; // calculate the distance from the Y axis when the mouse is pressed over the current element and save it to the variable roY + = xN * 0.2; // Add roX + = yN * 0.07 to the variable based on the proportional conversion. // Add the limit ('{wrap'}.css ('transform', 'perspective (800px) to the variable based on the proportional conversion) rotateX ('+ roX + 'deg) rotateY (' + roY + 'deg) '); // $ (' # wrap ') change the transform style value of the css animation ............ The angle is roY, and x _ = ev of roX. clientX; // set the cursor position to y _ = ev. clientY; // set the cursor position to the current position });}). mouseup (function () {// The time when the mouse is released when the binding event is triggered $ (this ). unbind ('mousemove '); // remove the mousemove (the current element here is the document) of the current element (the event where the mouse moves within the current element) play = setInterval (function () {// start the periodic timer xN = xN * 0.95; // converts the timer yN = yN * 0.95 proportionally; // converts the timer if (Math. abs (xN) <= 0.5 & Math. abs (yN) <= 0.5) // judge (the absolute value of xN <= 0.5) and the absolute value of yN <= 0.5) Run the following statement {clearInterval (play); // disable the timer (play)} roY + = xN * 0.2; // Add roX + = yN * 0.07 to the variable based on the proportional conversion. // Add the limit ('{wrap'}.css ('transform', 'perspective (800px) to the variable based on the proportional conversion) rotateX ('+ roX + 'deg) rotateY (' + roY + 'deg) '); // $ (' # wrap ') change the transform style value of the css animation ............ Angle: roY, roX}, 30); // The timer is triggered every 30 milliseconds });});
Here, we repeat the above Code for a more intuitive timer.
Explain the Timer:
When the mouse is released, if there is no timer, the rotation will end here, but this is not what this effect is intended for. When the mouse slides a large margin, the image will rotate at different angles as a whole, and the larger the distance, the larger the rotation angle. After a certain value is reached, the timer will be stopped. The code is similar to the above rotation, but I will not go into details here. Note that the timer must be stopped. Different numeric values have different effects. If you don't understand them very well, changing the numeric value to see the effect is your best choice. Recently, the status is not good, and the idea may not be as good as it was previously written, please forgive me/(ㄒ o branch )/~~