Carousel of small effects!

The carousel in the playground is a very fun project, especially a lot of girls are very yearning. So, the carousel in life can still be so appealing, not to mention the code in the computer? In my opinion, the carousel in the computer is more lovely, although I can not be in the scene, but it is more satisfying than I am in the scene ~

Let's start with a big rotating animal gathering:

Because the upload of the dynamic diagram is relatively large, it will not be uploaded.

This is a screenshot of the carousel, the effect is not obvious, but vaguely can see the existence of the small square, small section, is actually other photos.

Here is my code, in order to become more proficient and skilled use of CSS, here to make a note.

<!        DOCTYPE html>Width300px;Height240px;Margin200px Auto;AnimationRolldiv 10s linear infinite;Transform-style:preserve-3d; }@keyframes rolldiv{from{Transform:Rotatey (0DEG); }to{TransformRotatey (360DEG); }} img{Width300px;Height240px;Opacity0.9;PositionAbsolute }Img:nth-child (1) {TransformRotatey (36deg) Translatez (500px); }Img:nth-child (2) {TransformRotatey (72deg) Translatez (500px); }Img:nth-child (3) {TransformRotatey (108deg) Translatez (500px); }Img:nth-child (4) {TransformRotatey (144deg) Translatez (500px); }Img:nth-child (5) {TransformRotatey (180deg) Translatez (500px); }Img:nth-child (6) {TransformRotatey (216deg) Translatez (500px); }Img:nth-child (7) {TransformRotatey (252deg) Translatez (500px); }Img:nth-child (8) {TransformRotatey (288deg) Translatez (500px); }Img:nth-child (9) { Transform: Rotatey (324deg) Translatez (500px);}  Img:nth-child (Ten) { transform:  Rotatey (360deg) Translatez (500px);}  Body{ Transform-style: preserve-3d; -moz-perspective: 2000px;}  </style>     

This is the code written in Hbuilder, the effect is good.

Analyze the properties of the CSS individually:

Margin: The pixel value separated from the border above, and the left of the pixel value.

This representation from the {} to {} is rotated from 0° to 360 °.

@keyframes Rolldiv: This is the definition of the animation, where Rolldiv is the name of the animation, convenient for reference in the following article.

In the animation inside it is quoted, 10s means that its entire animation to maintain the sum of time, linear Infinite This is to say that it runs indefinitely, of course, you can also specify the number of times, such as 3, it means three times.

The following transform-style indicates that it is a 3d effect.

Opacity represents its transparency, and the top photo I define is 0.9. The range of this attribute value is 0~1, which becomes opaque from full transparency.

Position represents the position.

This is the first time I have seen the property!

Because I have a total of 10 pictures, and then need to rotate 360 °, so each picture is rotated to 36°, the back of the Translatez (500px), the distance from the center of rotation of the z-axis 500 pixels.

And the front Nth-child (1~10) represents each picture of the child.

Style This means that it is a 3d effect. , the later perspective my test effect is that the larger the value, the lower the overall.

Summary, the picture can also be converted to video, plus JS code can be achieved when the mouse, playing video and other effects. The process is also relatively simple.

Next, about rotation, here are examples of clocks:

First of all, you have to say that the color collocation is not very beautiful, but it doesn't matter, you can try to match your favorite color.

Code Show:

<!        DOCTYPE html>Width500px;Height500px;Background-color:#ddd;Border-radius:50%;Border6PX solid #000000;PositionRelative }. miaozhen{Width10px;Height170px;Background-color:#000000;PositionAbsoluteLeft245px;Top114px;AnimationAnimationmiaozhen 60s;Animation-iteration-count:InfiniteTransform-origin:50% 80%; }. fenzhen{Width14px;Height140px;Background-color:#A2A2A2;PositionAbsoluteLeft243px;Top144px;AnimationAnimationfenzhen 3600s;Animation-iteration-count:InfiniteTransform-origin:50% 76%; }. shizhen{Width18px;Height110px;Background-color:#16160D;PositionAbsoluteLeft241px;Top174px;AnimationAnimationshizhen 43200s;Animation-iteration-count:InfiniteTransform-origin:50% 69%; }@keyframes animationmiaozhen{from{Transform:Rotate (0deg); }to{ Transform: rotate (360deg);} } @keyframes animationfenzhen{ from{Transform: rotate (0deg); } To{ Transform: rotate ( 360DEG); }} @keyframes animationshizhen{ from{Transform: rotate (0deg); } To{ Transform: rotate ( 360DEG); }} </style>            

The code looks easy to write, too, and it's not too difficult.

Left--> the left spacing,top-->.

Animation: the implementation and completion time after the animation is defined.

Animation-iteration-count: The number of times, here is unlimited.

Transform-origin: This means that the rotation center points in the width and height of the proportion, because, I am in pursuit of beauty, I hope the length of the needle is consistent, so the ratio here is different. Requires programmers to calculate their own, so easy!

Then combine the above mentioned carousel, in fact this is very easy to understand.

The heart to turn the Trojan horse twists and turns even clock hope there is always a can let us know more about css!

Carousel of small effects!