Method and system for achieving three-dimensional page based on CSS, equipment and storage medium
A three-dimensional, page technology, applied in the system, a method for realizing three-dimensional pages based on CSS, equipment and storage media fields, can solve the problems of complex three-dimensional page methods and large amount of calculation, so as to enhance the user experience and deepen the sense of hierarchy. , the effect of improving flexibility
- Summary
- Abstract
- Description
- Claims
- Application Information
AI Technical Summary
Problems solved by technology
Method used
Image
Examples
Embodiment 1
[0077] This embodiment provides a method for implementing a three-dimensional page based on CSS, such as figure 1 As shown, the method includes:
[0078] Step 101: Create an element.
[0079] Step 102: Set the view area attribute of the element to the preset value of the view area based on the CSS.
[0080] Step 103: Modify the presentation style attribute of the element to a three-dimensional style based on CSS.
[0081] Step 104: Set the rotation attribute of the element to a rotation preset value based on the CSS.
[0082] Step 105: Create an HTML document.
[0083] Step 106: Quote the element on the content of the HTML document.
[0084] Step 107: Parse the HTML document.
[0085] Wherein, when setting the preset value of the field of view, the value of the z axis can be set, for example, the length of the z axis can be set to 0.
[0086] Among them, the rendering style attribute defaults to flat style.
[0087] Among them, you can directly refer to the CSS styles in the elements in the ...
Embodiment 2
[0094] This embodiment provides a method for implementing a three-dimensional page based on CSS, such as Figure 4 As shown, the method includes:
[0095] Step 201: Create an HTML document.
[0096] Step 202: Create a parent element.
[0097] Step 203: Set the viewing area attribute of the parent element to the preset value of the viewing area, and modify the rendering style attribute of the parent element to a three-dimensional style.
[0098] Step 204: Create six child elements in the parent element.
[0099] Step 205: Set the rotation direction attribute and the rotation angle attribute of each sub-element respectively.
[0100] Step 206: Quoting the aforementioned sub-element on the content of the HTML document.
[0101] Step 207: Parse the HTML document.
[0102] Among them, the rotation direction attributes include: the left, center, right, length, percentage of the x-axis, the top, center, bottom, length, percentage of the y-axis, and the length of the z-axis, which means changing t...
Embodiment 3
[0128] This embodiment provides a system for implementing three-dimensional pages based on CSS, such as Figure 7 As shown, the system includes: an element creation module 301, a view setting module 302, a style modification module 303, a rotation setting module 304, a document creation module 305, a reference module 306, and an analysis module 307.
[0129] The element creation module 301 is used to create at least one element;
[0130] The viewing area setting module 302 is configured to set the viewing area attribute of the element to a preset value of the viewing area based on CSS.
[0131] The style modification module 303 is configured to modify the presentation style attribute of the element to a three-dimensional style based on CSS.
[0132] The rotation setting module 304 is configured to set the rotation attribute of the element to a rotation preset value based on CSS.
[0133] The document creation module 305 is used to create an HTML document, and the HTML document includes ...
PUM
Login to View More Abstract
Description
Claims
Application Information
Login to View More 


