HTML5 + css3: 3D carousel effect album, html5css3
The purpose of this blog is to create an attractive instance of HTML5 CSS3 in the previous article. CSS3 creates a 3D flop of Baidu Post Bar. There is an important knowledge point about CSS 3D effects, that is, perspective and tranlateY.
: Hey hey, I made some photos of my graduation from college into a carousel and rotated around my big arts and sciences. I don't forget my Alma Mater's kindness ~
1. perspective
The perspective attribute includes two attributes: none and length value with unit.
The default value of the perspective attribute is none, indicating that 3D objects can be viewed from an infinite angle, but are flat. The other value <length> accepts a value with a length unit greater than 0. The unit cannot be a percentage value. <Length> the larger the value, the longer the angle appears, which creates a very 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 the length, the smaller the value, the more obvious the 3D effect is. The closer your eyes are to 3D objects. The opposite is true.
2. transform: translateZ (length)
If perspective: PX is set, the smaller the value of translateZ, the smaller the sub-element size. When the set value is close to PX, it is as if this element is in front of it. When it exceeds PX, the element is invisible when it reaches the end of your field of view.
Core of the above example:
1. First, the position: absolute of all the images is superimposed, and then the rotateY is set to 40 * I, I = 0, 1, 2... 9. All images will be in the same shape as flowers.
2. Set translateZ for the container of each image. All the images will be moved outward from the corresponding angle and extended into a large 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 sets rotateY, and translateZ; then we set div # container-webkit-transform-style: preserve-3d; transform-style: flat | in the preserve-3d, the flat value is the default value, indicating that all child elements are rendered on the 2D plane. Preserve-3d indicates that all child elements are rendered in 3D space. If the value of transform-style is set to a preserve-3d for an element, it means that no flat operation is performed and all its child elements are in 3D space. In general, this attribute is used for the execution element of 3D animation effects, that is, it needs to apply 3D animation effects, so its child elements should all be in 3D space.
One thing to note: In this example, the animation effect is that you click the mouse and the div # Container changes the rotateY at no end. All the image elements are in the div # container, now, the Trojan has been displayed as a carousel, so you only need to change the rotateY 40 angle of div # container each time.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
