Supercharge Your Innovation With Domain-Expert AI Agents!

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

Pending Publication Date: 2020-05-05
SHANGHAI CTRIP COMMERCE CO LTD
View PDF3 Cites 1 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0005] The technical problem to be solved by the present invention is to overcome the defects of complex and computationally intensive methods for realizing 3D pages in the prior art, and provide a method, system, and device for realizing 3D pages based on CSS that are simple, less computationally intensive, and easy to implement and storage media

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method and system for achieving three-dimensional page based on CSS, equipment and storage medium
  • Method and system for achieving three-dimensional page based on CSS, equipment and storage medium
  • Method and system for achieving three-dimensional page based on CSS, equipment and storage medium

Examples

Experimental program
Comparison scheme
Effect test

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 ...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention discloses a method and system for achieving a three-dimensional page based on a CSS, equipment and a storage medium. The method comprises the steps: creating at least one element; setting the view field attribute of the element as a view field preset value based on the CSS; modifying the presentation style attribute of the element into a three-dimensional style; setting the rotationattribute of the element as a rotation preset value; establishing an HTML document; referencing elements on the content of the HTML document; and analyzing HTML documents. According to the method, a 2D attribute in a CSS for controlling the appearance of a browser is expanded into a 3D attribute; rotation attribute values are modified, the webpage can present stereoscopic impression and depth sense; a complex function does not need to be set, a large number of numerical values do not need to be filled, the attribute in the CSS is expanded in a simple mode, the appearance of the 3D webpage withthe sense of depth can be achieved, a good impression is further given to a user, and on the other hand, the webpage loading speed is increased while the flexibility of a 3D display mode is improved.

Description

Technical field [0001] The present invention relates to the technical field of web page processing, and in particular to a method, system, device and storage medium for implementing a three-dimensional page based on CSS (Cascading Style Sheet). Background technique [0002] 3D (three-dimensional) stereo vision is obviously used to display three-dimensional images. The basic principle is to output two pictures, so that the two eyes can see different pictures. Because the difference between the pictures will make people feel three-dimensional, 3D vision measurement not only has Richer and more powerful functions, as well as more convenient operations. [0003] The current web pages pursue more than just the display of data, but also to improve the user experience and make users feel beautiful. 3D web pages have gradually become the trend of web page display. Many computer official websites or company official websites have eliminated flat web pages and use 3D. Web pages to meet user...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Applications(China)
IPC IPC(8): G06F8/38
CPCG06F8/38
Inventor 黄君
Owner SHANGHAI CTRIP COMMERCE CO LTD
Features
  • R&D
  • Intellectual Property
  • Life Sciences
  • Materials
  • Tech Scout
Why Patsnap Eureka
  • Unparalleled Data Quality
  • Higher Quality Content
  • 60% Fewer Hallucinations
Social media
Patsnap Eureka Blog
Learn More

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2025 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com