A scattered 3D flip effect based on css3_html/css_WEB-ITnose
CSS3 enables us to jump out of the 2D space and achieve animation effects in the 3D space. Here is an automatic flipping 3D dice animation effect production process.
The first step is to lay out the HTML. For 3D effects, the layout has certain rules. 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. It is the outermost div and is used to provide a 3D scene. It can be considered as a display platform for 3D graphics. Only by defining such a div can 3D graphics be displayed. In addition Define a div with class group to hold the six planes of the dice and group them together. Finally, define 6 parallel divs to represent the six planes of the die.
The second step is to define the css of the three-dimensional scene. The code is as follows:
#outer{ /*定义视距*/ -webkit-perspective:500px; -WebKit-perspective-origin: 50% 50%; -moz-perspective:500px; -moz-perspective-origin: 50% 50%; overflow: hidden; }The perspective here means seeing the three-dimensional inside through this three-dimensional scene. The distance of the effect, the larger the value, the farther the effect is seen, the smaller the value, the closer the effect is seen. Perspective-origin represents the angle from which the three-dimensional graphics are viewed relative to the browser. The first parameter represents the X-axis direction, and the second parameter represents the Y-axis direction. The unit value px or percentage can be used. In order to achieve compatibility with ff and chrome, moz and WebKit prefixes are added to the corresponding CSS names. It is necessary to talk about the coordinate definition in CSS3 here, 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 from the inside of the screen Stretching out of the screen is different from the coordinate system definition in solid geometry.
The third step is to set the css attributes for the div with the id of group. This div mainly combines the 6 planes of the dice 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; }The width and height of the div are defined here, and its position is defined as relative, so that the six planes in it can be absolutely positioned relative to this div. At the same time, the attribute transform-style:preserve-3d tells Browser, all transform transformations are transformations in 3D space, not in 2D space, and are also prefixed for compatibility.
The fourth step is to define the common page attribute of each plane div, that is, the common CSS attribute of each dice sub-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; }Here It is defined that the width and height of each plane are the same as the width and height of its parent div group, and absolute positioning is performed. (Only when it is absolutely positioned and separated from the document flow can the transform3D transformation effect be applied, otherwise it can only be transformed in 2D space). What needs to be explained is the two sentences word-break:break-all;word-wrap:break-word;
The fifth step is to define the CSS properties of each plane div
The first step planes:
#page1{background-color: #10a6ce;line-height: 100px;}
In order to distinguish each plane and show the 3D effect, you need to Set different background colors for adjacent divs. The first div defaults to the XY plane without transformation
The 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; }is used here transform-origin defines which side of the plane to start transforming. Here, the rightmost side is used to go around -90 degrees along the Y-axis. The prefix
is also added for compatibility. The 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;}The sixth plane:
#page6{background-color: #10a6ce;-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px);line-height: 50px;}This sixth plane needs to translate its width and height along the Z axis to achieve the purpose of connecting other planes
The sixth step is to define the keyframe 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 stages, from 0% to 50%. Rotate 360 degrees along the Y axis, and then rotate 360 degrees along the X axis from 50% to 100% to complete an animation effect. Also for compatibility, the prefix
is added to the keyframes.The seventh step is to use CSS to call the previously defined keyframe animation in the div with the id of group. Since the six planes of the color change need to be transformed at the same time, the animation needs to 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; }The animation:scroll 8s linear 0s infinite; CSS attribute is added to the result of the third step, indicating that the animation named scroll is called. The completion time of an animation is 8s. The animation The speed of transformation is constant, and the animation starts immediately and loops with infinite animation effects.
Online preview Source code download
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
