The purpose of this blog is because the seductive instance of the HTML5 CSS3 special instance CSS3 created the 3D flop effect of Baidu Tieba. There is a relatively important knowledge point about the CSS 3D effect.
Effect chart: Hey, I made some photos of college graduation into a rotary Trojan, rotating around my big text, and the grace of the cultivation of my alma mater ~
1. PerspectivePerspective attributes include two attributes: None and the length of the unit.
Among them, the default value of the Perspective attribute is NONE, which means that the 3D object is viewed at an unlimited angle, but it looks flat. Another value <langth> accepts a value of a unit greater than 0. And its unit cannot be percentage. The larger the value of <langth>, the farther the angle appears, so as to create a quite low strength and a very small 3D space change. Conversely, the smaller this value, the closer the angle, the closer, so as to create a high -intensity angle and a large 3D change. To put it simply: When the Perspective settings is set, the smaller it means that the more obvious the 3D effect, the closer your eyes are closer to the 3D object, and vice versa.
2. Transform: Translatedz (length)Assuming that when you set Perspective: 300px, the smaller the value of the translatez is set, the smaller the size of the child element. When the setting value is close to 300px, it seems to be in front of It's not visible.
The core of the above example:1. First of all, the container of all pictures is Position: absolute, superimposed together, and then set the rotatey at a time to 40*i, i = 0, 1, 2 ... 9;
2. Then set the translatez for each picture of the container. All the pictures will move from the corresponding angle to a large circle, that is, the effect of the picture above.
html:
<! Doctype html> <html> <head> <Title> </Title> <meta charset = UTF-8/> <link href = css/reset.css rel = styleSheet type = text/css/> <script type = Text/javascript src = ../../jquery-1.8.3.js> </script> <script type = Text/Javascript> // Alert (64/math.tan (20/180 * math.pi))) ; Var transform = function (element, value, key) {key = key || transform; [moz, o, ms, webkit,] .Foreach (prefix) {Element.style [prefix + key ] = Value;} ); Return Element;} $ (function () {var deg = -40, i = 1; $ (#container) .CLick (function () {transform ($ (this) [0], Rotatey ( + (deg * (deg *] i ++)+deg))})});}); </script> </head> <body> <div ID = Stage> <ul ID = Container> <li> <IMG SRC = IMG/1.jpg/> < span> do one thing at a time, and do well .. </span> </li> <li> <IMG SRC = IMG/2.jpg/> <span> Do one thing at a time, and do well. </span> </li> <li> <IMG SRC = IMG/3.jpg/> <span> Keep on GOING NEVER GIVER GIVER GIVE. </SPAN> </li> <li> <IMG SRC = IMG/ 4.jpg/> <span> Whatver is word doing is word doing well. </Span> </li> <li> <img src = img/5.jpg/> <splieve in yourRset. </Span>> </span>> </span>> </span> </li> <li> <IMG SRC = IMG/6.jpg/> <span> Action Speak Louder Than Words. </SPAN> </li> <li> <IMG SRC = IMG/7.jpg/> < span> NEVER PUT Office You Can Do TODAY UNTIL TOMORROW. </SPAN> </li> <li> <IMG SRC = IMG/8.jpg/> <Span> Jack of All Trands and Master of None. </span > </li> <li> <IMG SRC = IMG/9.jpg/> <span> Judge Not FROM APPEARANCES. </SPAN> </li> </div> </body> </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 {wid {wid TH : 900px; min-height: 100px; Margin-heft: Auto; Margin-Right: Auto; Padding: 100px 50px; -Webkit-Perspective: 1200px; POSITION: Relative;} {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-traansform: rotatey (40deg) translatez (300px);} li: nth-child (2) {-webkit-transform: rotat EY (80deg) Translatez (300px);} li: nth-child (3) {-webkit-transform: rotatey (120Deg) translatez (300px);} li: nth-child (4) {-webkit-TRANSFORM: 16 0Deg) Translatez ( 300px);} li: nth-child (5) {-webkit-traansform: rotatey (200DEG) translatez (300px);} li: nth-child (6) {-webkit-transform: rotatey (240Deg) TRANSL ATEZ (300px) ;} li: nth-child (7) {-webkit-traansform: rotatey (280Deg) translatez (300px);} li: nth-child (8) {-webkit-transform: Rotatey (300px);} li: nth-child (9) {-webkit-transform: rotatey (360Deg) translatez (300px);}DIV#Stage is the stage, sets Perspective, each li sets Rotatey, and translatez; then we will set#Container to set -webkit-transform-style: PRESERVE-3D; Transform-Style: Flat | Presereve- 3D, Flat value For the default value, it means that all sub -elements are presented in 2D planes. Preserve-3D indicates that all sub-elements are presented in 3D space. If the value of the Transform-Style is set to a Preserve-3D on a element, it indicates that it does not perform a flat exhibition operation, and all his sub-element is located in 3D space. Under normal circumstances, this attribute is used for the execution element of 3D animation effects, that is, it uses 3D animation effects, so its sub -elements should be in 3D space.
One thing to pay attention to: In this example, the animation effect is actually the mouse click. DIV#Container changes rotatey in the end. All the picture elements are in DIV#Container, and it has been shown as the rotating Trojan effect. It is to rotate this Trojan, so you only need to change the Rotatey 40 angle of the DIV#Container each time.
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.