基于CSS实现三维页面的方法、系统、设备及存储介质技术方案

本发明专利技术公开了一种基于CSS实现三维页面的方法、系统、设备及存储介质，方法包括：创建至少一元素；基于CSS设置元素的视域属性为视域预设值；修改元素的呈现样式属性为三维样式；设置元素的转动属性为转动预设值；建立HTML文档；在HTML文档的内容上引用元素；解析HTML文档。本发明专利技术的方法，通过将用于控制浏览器外观的CSS中的2D属性扩展为3D属性，更改转动属性值，可以使网页呈现立体感、深度感，其不仅无需设置复杂的函数、也无需填入大量的数值，通过简单的方式扩展CSS中的属性可以实现纵深感的3D网页的外观，进一步给用户好的观感，另一方面，提高3D显示方式的灵活度的同时也加快了网页的加载速度。

The method, system, equipment and storage medium of realizing 3D page based on CSS

【技术实现步骤摘要】
基于CSS实现三维页面的方法、系统、设备及存储介质
本专利技术涉及网页处理
，特别涉及一种基于CSS(层叠样式表)实现三维页面的方法、系统、设备及存储介质。
技术介绍
3D(三维)立体视觉显然就是用来显示立体影像的，基本原理就是输出两个画面，让双眼看到不同的画面，由于画面之间的差别会使人产生立体感，3D视觉测量不仅拥有着更为丰富、更为强大的功能，还有着更加便捷的操作。现在的网页追求的不仅仅是数据的展示，更需要的是提高用户的体验度，让用户产生美感，而3D网页逐渐成为网页显示的趋势，很多电脑官网或者公司官网都淘汰平面网页，使用3D网页来满足用户的需求在现有技术中，将网页页面制作成3D效果一般有两种方式，一种为直接通过网页平台进行转换，而这种方式实现的3D效果有限，灵活度也不高，另一种方式为通过canvas(用于在网页上绘制图形的画布)做的在画布来实现，其具体实现方式为，首先创建canvas元素，然后向HTML5(超文本标记语言)页面添加canvas元素，由于canvas元素本身没有绘图能力，因此，需要在JavaScript(一本文档来自技高网...

【技术保护点】
1.一种基于CSS实现三维页面的方法，其特征在于，所述方法包括：/n创建至少一元素；/n基于CSS设置所述元素的视域属性为视域预设值；/n基于CSS修改所述元素的呈现样式属性为三维样式；/n基于CSS设置所述元素的转动属性为转动预设值；/n建立HTML文档，所述HTML文档中包括若干内容；/n在所述HTML文档的所述内容上引用所述元素；/n解析所述HTML文档。/n

【技术特征摘要】
1.一种基于CSS实现三维页面的方法，其特征在于，所述方法包括：
创建至少一元素；
基于CSS设置所述元素的视域属性为视域预设值；
基于CSS修改所述元素的呈现样式属性为三维样式；
基于CSS设置所述元素的转动属性为转动预设值；
建立HTML文档，所述HTML文档中包括若干内容；
在所述HTML文档的所述内容上引用所述元素；
解析所述HTML文档。


2.如权利要求1所述的基于CSS实现三维页面的方法，其特征在于，所述转动属性包括转动方向属性及转动角度属性。


3.如权利要求1所述的基于CSS实现三维页面的方法，其特征在于，
创建至少一元素的步骤包括：
创建一父元素；
在所述父元素中创建至少一子元素；
基于CSS设置所述元素的视域属性为视域预设值的步骤包括：基于CSS设置所述父元素的视域属性为视域预设值；
基于CSS修改所述元素的呈现样式属性为三维样式的步骤包括：基于CSS修改所述父元素的呈现样式属性为三维样式；
基于CSS设置所述元素的转动属性为转动预设值的步骤包括：基于CSS设置所述子元素的转动属性为转动预设值。


4.如权利要求3所述的基于CSS实现三维页面的方法，其特征在于，在所述父元素中创建至少一子元素的步骤包括：
在所述父元素中创建六个子元素；
基于CSS设置所述元素的转动属性为转动预设值的步骤包括：分别设置每一所述子元素的转动属性；
所述HTML文档中包括六块内容，每一块内容分别与每一所述子元素一一对应。


5.一种基于CSS实现三维页面的系统，其特征在于，所述系统包括：元素创建模块、视域设置模块、样式修改模块、转动设置模块、文档建立模块、引用模块及解析模块；
所述元素创建模块用于创建至少一元素；
所述视域设置模块用于基于CSS设置所述元...

【专利技术属性】
技术研发人员：黄君，
申请(专利权)人：上海携程商务有限公司，
类型：发明
国别省市：上海;31