HTML5 CSS3 Theme: Tempting examples of 3D carousel effects albums

Reprint please indicate source: http://blog.csdn.net/lmj623565791/article/details/32964301

First explain the source of the idea: http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html ( Zhang Xin Xu's blog ), Interested in the front desk can be nothing to see his blog, very to force ~

The purpose of this blog is because of the HTML5 CSS3 topic tempting example CSS3 build Baidu bar 3D flop effect has a more important knowledge of the CSS 3D effect is not mentioned, is perspective and Tranlatey

: Hey, I graduated from college some photos, made merry-go-round, around my big arts and sciences rotation, do not forget the nurture of the alma mater of the Grace ~

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); }

Div#stage as stage, set perspective, each Li set Rotatey separately, and Translatez; then we will Div#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 represents
Does not perform a flattening operation, 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, Div#container in the misconduct of the change Rotatey, all the picture elements are in the Div#container, and has been shown as the carousel effect, now to do is to rotate this trojan, So you just need to change Div#container's Rotatey 40 angle each time.

Welcome to the Guidance ~