Home > Developer > JavaScript
A scatter 3D flip Effect Based on css3 and css33d flip Effect
Css3 enables us to jump out of the 2d space and achieve the animation effect of the 3d space. Here we provide an automatic flip 3d animation effect production process.
Step 1: first, perform HTML layout. for 3D effects, the layout is regular. The Code is as follows:
<body><div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</div> <div class="page" id="page5">.....</div> <div class="page" id="page6">......</div> </div></div></body>
Define a div called outer in the body, which is the outermost div. It is used to provide a 3D scene and can be considered as a 3D image display platform, only such a div can be defined to display 3D images. In addition, a class is defined as a group div, which is used to hold the six planes of a group and combine them. At last, we define six parallel divs to represent the six planes of the cursor.
Step 2: Define the css of a 3D scenario. The Code is as follows:
# Outer {/* define the line of sight */-webkit-perspective: 500px;-WebKit-perspective-origin: 50% 50%;-moz-perspective: 500px;-moz-perspective-origin: 50% 50%; overflow: hidden ;}
Here, perspective indicates the distance between the 3D effects in the 3D scenario. The larger the value, the farther the effect is, the smaller the value, and the closer the effect is. Perspective-origin indicates the angle relative to which the browser observes the 3D image. The first parameter indicates the X axis direction, and the second parameter indicates the Y axis direction. The unit value px or percentage can be used. To ensure compatibility with ff and chrome, prefix moz and WebKit before the corresponding CSS name. The coordinate definition in css3 is as follows:
In css3, the positive direction of the X axis is to the right, the positive direction of the Y axis is downward, and the positive direction of the Z axis is extended from the screen outside, which is different from the coordinate system definition in the three-dimensional ry.
Step 3: Set the css attribute for the div whose id is group. This div combines the six planes of the div to facilitate the definition of the overall animation effect. The Code is as follows:
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; }
This defines the width and height of the div, and defines its position as relative, so that the six planes relative to this div absolute positioning, while transform-style: preserve-3d this property tells the browser, all transform transformations are in 3D space, instead of in 2D space. They are also prefixed for compatibility.
Step 4: define the common page attribute of each plane div, that is, the CSS attribute of each plane. The Code is as follows:
.page{ width: 200px; height: 200px; position: absolute; border-radius: 20px; text-align: center; font-weight: bold; opacity: 0.5; overflow: hidden; filter:alpha(opacity=50); font-size:150px; word-break:break-all; word-wrap:break-word; }
The width and height of each plane are defined to be the same as the width and height of its parent div group, and absolute positioning is performed. (transform3D transformation effect can be applied only when the absolute positioning is removed from the document stream, otherwise, it can only be converted in 2D space. It must be noted that word-break: break-all; word-wrap: break-word;
Step 5: Define the CSS attributes of the div of each plane
First plane:
#page1{background-color: #10a6ce;line-height: 100px;}
In order to differentiate each plane and display 3D effects, we need to set different background colors for adjacent Divs. The first div is located in the XY plane by default, without transformation.
Second plane:
#page2{ background-color: #0073b3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); -moz-transform-origin:right; -moz-transform:rotateY(-90deg); line-height: 100px; }
Here, transform-origin is used to define which side of the plane to start transformation. Here, the rightmost side is used to bypass-90 degrees along the Y axis, and a prefix is also added for compatibility.
Third plane:
#page3{ background-color: #07beea; -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); -moz-transform-origin:left; -moz-transform:rotateY(90deg); line-height: 80px; }
Third plane:
#page4{ background-color: #29B4F0; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); -moz-transform-origin:top; -moz-transform:rotateX(-90deg); line-height: 80px; }
Fifth plane:
#page5{background-color: #6699cc;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);-moz-transform-origin:bottom;-moz-transform:rotateX(90deg);line-height: 50px;}
Sixth plane:
#page6{background-color: #10a6ce;-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px);line-height: 50px;}
The sixth plane needs to translate its width and height along the Z axis to connect to other planes.
Step 6: Define the Key Frame Animation. The Code is as follows:
@-moz-keyframes scroll { 0% { -moz-transform:rotateY(0deg) rotateX(0deg) ; } 50% { -moz-transform:rotateY(360deg) rotateX(0deg) ; } 100% { -moz-transform:rotateY(360deg) rotateX(360deg); } } @-webkit-keyframes scroll { 0% { -webkit-transform:rotateY(0deg) rotateX(0deg) ; } 50% { -webkit-transform:rotateY(360deg) rotateX(0deg) ; } 100% { -webkit-transform:rotateY(360deg) rotateX(360deg); } }
The animation here is divided into two phases: from 0% to 50%, the rotate rotates 360 degrees along the Y axis, and then rotates 50% degrees along the X axis from 100% to 360, in this way, a prefix is added to the Key Frame keyframes for compatibility.
Step 7: Use CSS in the div whose id is group to call the Key Frame Animation defined earlier. Here, because the six planes need to be modified simultaneously, therefore, the animation must be called on the parent div of the six planes.
#group{ width: 200px; height: 200px; position: relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin: 200px auto; -webkit-animation:scroll 8s linear 0s infinite; -moz-animation:scroll 8s linear 0s infinite; }
Add the animation: scroll 8 s linear 0 s infinite to the result in step 3. the CSS attribute indicates that the scroll animation is called and the animation completion time is 8 s, the animation changes at a constant speed, and immediately starts executing the animation and repeating the infinite animation effect.
Download Online Preview source code
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
