Home > Developer > Web Develop
Mid-Autumn Theme 3D rotating album
, which is achieved through JavaScript and CSS3. The whole case only less than 80 lines of code, I hope that through this case, so that is in the confusion period of JS beginners to feel the joy of learning. I will be as detailed as possible, do not need you to CSS and JS have how deep understanding, you can also follow step by step. If you are happy for the women's ticket, then you can also completely change the picture to each other's photos, in a special moment to give each other a surprise oh ~
CSS3 's strong make the display of the Web page become unprecedented rich, and with simple JS code, you can achieve this effect. Well, don't talk much, let's get started.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Happy Mid-Autumn Festival</title> <style> </style> </head> <body> </body> <script> </script> </html>
* * 1.1 *: The meaning of this sentence is to set the page encoding to Utf-8, to ensure that Chinese can be displayed normally.
1.2. : Sets the title of the page.
That's it:
1.3 : CSS style can be written in style, so-called CSS is equivalent to the DOM elements draped a layer of beautiful coat.
1.4. : Adds DOM elements to the body area, which is the theme frame of a Web page. such as div,p,a tags, etc., is placed in this part.
1.5. : This is the JS script area, simply speaking, is to dynamically control the body area inside the tag element. The reason is placed under the body, is to ensure that the browser first all the DOM elements are rendered complete before the JS operation.
Renders the entire page black in the style block
*{padding:0px;margin:0px;} /* This is to eliminate the inner and outer margins of the default dom element, so that we can write css more accurately */
Body{background:#000;}
000 is pure black
By the way, #FFF肯定就是纯白色了.
In this case, we set the background color to pure black.
We draw a div with id photos as a frame to load all the pictures.
<div id="photos"></div>
This sentence to write, there is nothing on the page, div even width and height are not, this time, we will use CSS to add a beautiful cloak of div.
#photos{
Width:110px; /*width*/
Height:180px; /*height*/
Border:1px solid #ccc; /*plus a gray border*/
Margin:160px auto; /* horizontally centered, height 100px*/ from the top
}
This is still a flat effect, no 3D feel, if you do not believe, we can use the Transform property to let it up along the Y axis to see if it is 3D.
transform:rotateY(0deg);
This sentence means that the div box is rotated 0 degrees along the y axis.
Let's use Google Chrome to open (or other browsers, not too old on the line), open debug mode (most browsers are directly click on the F12), to enter such an interface.
Click the arrows here to see the DOM elements.
Slide the mouse over the div and click.
Then the right side will come out with this interface, which has all the styles of this div.
We find Transform:rotatey (0deg) , this line, and then we can dynamically change its value, we click on a few, select the word 0deg , then press the UP arrow on the keyboard, this is the case:
Wow, it's turning, it's amazing!
When I knew there was such a thing, my heart was very excited.
This is still 2D, no 3D effect, how to add 3D effect?
We add these two attributes,
Transform-style:preserve-3d;/*Set 3d environment*/ Perspective: 800px; /* set the depth of field to 800px*/
The so-called depth of field, simply speaking, is the range of good focus. It can decide whether to blur the background to highlight the subject, or to make a clear background. I see the internet is saying that, like photography friends should know very well.
To highlight the effect, we add a picture and, by the way, a little reflection on the image.
#photos img{ width:100%; height:100%; position:absolute; box-shadow:0 0 8px #eaeaea; box-shadow: 1px -1px 6px #666; border-radius:4px; -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5)); cursor:pointer; }
Effect:
It looks like a little bit of effect.
I have prepared 8 pictures, and now add the remaining pictures.
<div id="photos"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> </div>
So far, all the pictures have been stacked together, and we think about how to distract them from the siege.
In 3-D coordinates, there are not only x-axis, y-axis, but also z-axis. We first need to understand what the z-axis is, the y-axis is rotated around, the above has been demonstrated, it is not difficult to think that the x-axis should be rotated up and down, then the z axis?
Let's get rid of the reflection first and look clear.
/*-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));*/
Well, let's explore:
Wow, that's it!
The z-axis is an axis perpendicular to the cross section!
We don't need to rotate around the z axis right now, so how about moving the album along the z axis for a distance?
Translatez can help us achieve this effect.
Back to the chase.
Our goal is to get all the pictures scattered, so the first step is to have each picture go an angle evenly according to the y-axis. How much is this angle?
One lap is 360 degrees, divided by the number of pictures, is the angle of each picture turned.
We use JS to achieve:
Var photosDom = document.getElementById(‘photos‘); / / Get the image array Var images = photosDom.getElementsByTagName(‘img‘); / / Get the number of pictures Var len = images.length; / / Calculate the angle of each picture rotated by the Y axis Var deg = Math.floor(360 / len); For(var i = 0; i < len;i++){ Images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) ‘; // don’t add spaces before deg }
The code is relatively clear, is a division operation, and then to each picture to add a rotation style.
Effect:
Visible, each picture has turned a certain angle.
In other words, this time, the z-axis of each picture is different!
If you still feel the difficulty, it doesn't matter, let's take one of the pictures to give an example and let it move outward along its own Z axis. And then you get it.
For(var i = 0; i < len;i++){ Images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) ‘; // don’t add spaces before deg If(i == 1){ Images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) translateZ(300px)‘; } }
Obviously, this is the case, then the solution itself is out, we only need to be in each picture according to the y-axis rotation, let it go along the z axis "float" it!
The distance is slightly larger, it's 380px.
For(var i = 0; i < len;i++){ Images[i].style = ‘transform : rotateY(‘ + deg * i + ‘deg) translateZ(380px) ‘; // don’t add spaces before }
This is a bit too level, we let the whole album down a little bit, to a slightly more overlooking the effect. Let's move the album Down by 10px on the x-axis.
transform:rotateX(-10deg);
So the effect comes out.
In this case, at the bottom of the album, there is a transparent chassis, and now we are starting to achieve this effect.
<div id="photos"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> <div></div> </div>
In fact, it is a div placed inside the photos. We can achieve this by locating the layout and CSS3 features.
On the code:
#photos div{ width:1200px; height:1200px; border-radius:50%; position:absolute; top:102%; left:50%; margin-left:-600px; margin-top:-600px; transform:rotateX(90deg); background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0)); }
The top property is a little bit out of tune, and you can adjust the height with a little bit of the browser's debug mode.
Effect:
The final step, or the end of the JS code, we use JS timer setinterval, every 30 milliseconds to let the entire album turned a very small angle on the line.
var x = 0; setInterval(function(){ photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) * 0.2 +"deg)"; },30);
The code should still be fairly clear.
The final effect comes out:
Today I made a little change, I changed the margin of photos from the previous 100px auto to 160px Auto.
From the effect, the photo album in the process of rotation, there will be a certain offset, although I personally think this effect is very interesting, however, if you do not want its position to be offset, you just need to photos outside the escape a layer of Div, and then move the depth of field to the outer div OK.
Demo Address: http://s-335245.gotocdn.com:8080/demo.html?path=3d
Gjm:js + CSS3 Create cool 3D Albums
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
