CSS3 3D Transform Transform

, practical application-pictures of the carousel effect

You can ruthlessly click here: Picture of the Carousel effect demo

It is recommended to watch in enough new versions of Firefox browser or Safari browser, chrome may need to be centered to view, as an effect thumbnail:

Principle:
Those seemingly cool CSS3 3D effects actually prodded those properties (these are mentioned in this article), toss to toss, this effect is obviously the same.

First the HTML structure, as follows:

Picture pictures of stage    container        pictures ...        

For the stage, it's simple, add a visual range, say 800 pixels:

perspective:800px;

For containers, it is simple to add a 3D view declaration, as follows:

transform-style:preserve-3d;

Then there are the pictures. In order not to produce a helical effect like DNA, we make all position:absolute the images common to the same center point.

Obviously, the picture carousel is similar to the rotational movement of the pole dance, so we care about the rotateY size.

Because it is going to be just a circle, so the picture rotateY value just 0~360 equal, so, if there are 9 pictures, then the rotation angle of each picture will accumulate 40 (360/9 = 40) degrees. So there are:

Img:nth-child (1) {Transform:rotatey (   0deg);} Img:nth-child (2) {Transform:rotatey (  40deg);} Img:nth-child (3) {Transform:rotatey (  80deg);} Img:nth-child (4) {Transform:rotatey (120deg);} Img:nth-child (5) {Transform:rotatey (160deg);} Img:nth-child (6) {Transform:rotatey (200deg);} Img:nth-child (7) {Transform:rotatey (240deg);} Img:nth-child (8) {Transform:rotatey (280deg);} Img:nth-child (9) {Transform:rotatey (320deg);}

Is that a good thing?

No, no, no!!!

Think about that, although the 9 beautiful beauty of each person's position is not the same, but are standing at the same point, already squeezed into a group, a hood are squeezed into C, obviously not (see only set Rotatey)! We need to open up space ~ ~

How to open space, very simple.

Think about that: 9 beautiful women, respectively, face to the cardinal point of a total of 9 different directions, they as long as everyone forward a four-way walk, the space between the girls soon opened, the appearance of a round! Imagine the night sky, fireworks blooming Scene ~ ~

Here's a step forward, the smart person should already know, is mentioned in this article translateZ , when the translateZ positive value of the time, the elements will go to the direction they face, if the element is not rotated, it will go toward the monitor!!

Now there is only one question, how far will the beauties go??

This distance is calculated with a formula drop!

Take this demo distance, each beauty picture width is 128 pixels, therefore, has the following ideal position:

In red, r it is the ideal value of the picture in the demo page translateZ (this value can make all the pictures seamlessly surround a circle)!

rThe calculation is very simple, with junior high school mathematics level should be:

R = 64/math.tan (20/180 * Math.PI) ≈175.8

Demo page in order to look good, the picture left a little space between, using the translateZ value of 175.8 + 20 = 195.8 .

CSS3 3D Transform Transform