CSS3 's Carousel

This time to everyone to bring CSS3 carousel, to achieve the CSS3 carousel notice What, the following is the actual case, together to see.

1, perspective

The Perspective property includes two properties: None and a length value with a unit.

The default value of the Perspective property is None, which represents an infinite angle of 3D objects, but looks flat. Another value <length> accepts a value that has a length unit greater than 0. and its unit cannot be a percent value. The larger the <length> value, the farther the angle appears, creating a fairly low intensity and a very small 3D space change. Conversely, the smaller the value, the closer the angle appears, creating a high-intensity angle and a large 3D change. To put it simply: when perspective sets length, the smaller it means that the 3D effect is more pronounced, the closer your eyes are to 3D objects, and vice versa.

2, Transform:translatez (length)

Assuming that perspective:300px is set, the smaller the value of the set Translatez, the smaller the child element size, and when the setting value is close to 300px, it is as if the element is in front of it, and when it exceeds 300px, the element is not visible until after it has reached the back of your field of view.

The core of the above example:

1, first all the pictures of the container position:absolute, superimposed together, and then set Rotatey, respectively, 40*i, i= 0, 1, 2...9; all the pictures intersect into a flower-like shape.

2, then for each picture of the container set Translatez, all the pictures will move from the corresponding angle outward, expand into a great circle, that is, the effect.

Html:

<! DOCTYPE html> 
css: 
 

Li {width:128px;      box-shadow:0 1px 3px rgba (0, 0, 0,. 5);      Position:absolute;  bottom:0;      } li img {width:128px;      box-shadow:0 1px 3px rgba (0, 0, 0,. 5);  Vertical-align:middle;      } li span {display:block;      width:128px;      Text-align:center;      Color: #333;  font-size:8px;      } #stage {width:900px;      min-height:100px;      Margin-left:auto;      Margin-right:auto;      padding:100px 50px;      -webkit-perspective:1200px;  position:relative;      } #container {Background:url ("img/xawl.jpg") no-repeat 0 0;      margin-top:200px;      width:128px;      box-shadow:0 1px 3px rgba (0, 0, 0, 5);      height:100px;      Margin-left: -64px;      -webkit-transition:-webkit-transform 1s;      Transition:transform 1s;      -webkit-transform-style:preserve-3d;      Position:absolute;  left:50%;  } li:nth-child (0) {-webkit-transform:rotatey (0deg) Translatez (300px); } li:nth-Child (1) {-webkit-transform:rotatey (40deg) Translatez (300px);  } li:nth-child (2) {-webkit-transform:rotatey (80deg) Translatez (300px);  } li:nth-child (3) {-webkit-transform:rotatey (120deg) Translatez (300px);  } li:nth-child (4) {-webkit-transform:rotatey (160deg) Translatez (300px);  } li:nth-child (5) {-webkit-transform:rotatey (200deg) Translatez (300px);  } li:nth-child (6) {-webkit-transform:rotatey (240deg) Translatez (300px);  } li:nth-child (7) {-webkit-transform:rotatey (280deg) Translatez (300px);  } li:nth-child (8) {-webkit-transform:rotatey (320deg) Translatez (300px);  } li:nth-child (9) {-webkit-transform:rotatey (360deg) Translatez (300px); }
P#stage as stage, set perspective, each Li set Rotatey respectively, and Translatez; then we p#container set-webkit-transform-style:preserve-3d;

transform-style: flat | preserve-3d

Where the flat value is the default value, indicating that all child elements are rendered in the 2D plane. Preserve-3d indicates that all child elements are rendered in 3D space. If the value of Transform-style is set to an element of preserve-3d, it means that no flattening operation is performed, and all of his child elements are in 3D space. In general, this property is used for the execution element of the 3D animation effect, that is, it is applied to the 3D animation effect, so its child elements should be in 3D space.

One thing to note: this example, in fact, the animation effect is the mouse click, P#container in the misconduct of the change Rotatey, all the picture elements are in the P#container, and has been shown as the carousel effect, now to do is to rotate this trojan, So you just need to change P#container's Rotatey 40 angle each time.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

You don't know the upset CSS properties

How the absolute positioning of CSS is compatible with all resolutions

Properties of CSS3 Transition, animation, transform