CN111104115A - 基于css实现三维页面的方法、系统、设备及存储介质 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及网页处理技术领域，特别涉及一种基于CSS(层叠样式表)实现三维页面的方法、系统、设备及存储介质。

背景技术

3D(三维)立体视觉显然就是用来显示立体影像的，基本原理就是输出两个画面，让双眼看到不同的画面，由于画面之间的差别会使人产生立体感，3D视觉测量不仅拥有着更为丰富、更为强大的功能，还有着更加便捷的操作。

现在的网页追求的不仅仅是数据的展示，更需要的是提高用户的体验度，让用户产生美感，而3D网页逐渐成为网页显示的趋势，很多电脑官网或者公司官网都淘汰平面网页，使用3D网页来满足用户的需求

在现有技术中，将网页页面制作成3D效果一般有两种方式，一种为直接通过网页平台进行转换，而这种方式实现的3D效果有限，灵活度也不高，另一种方式为通过canvas(用于在网页上绘制图形的画布)做的在画布来实现，其具体实现方式为，首先创建canvas元素，然后向HTML5(超文本标记语言)页面添加canvas元素，由于canvas元素本身没有绘图能力，因此，需要在JavaScript(一种程序语言)内部填写各个数值，如当绘制一个立体的矩形时，需要绘制出矩形的8个顶点，每个顶点需要分别设置x、y及z轴的坐标，而后需要将各个点连接出来，需要自行编写绘制的函数来一一进行连接。这种方式需要自行定义的函数、数据多、需要的计算量大。

发明内容

本发明要解决的技术问题是为了克服现有技术中实现三维页面的方法复杂、计算量大的缺陷，提供一种简便、计算量小且便于实现的基于CSS实现三维页面的方法、系统、设备及存储介质。

本发明是通过下述技术方案来解决上述技术问题：

本发明提供了一种基于CSS实现三维页面的方法，所述方法包括：

创建至少一元素；

基于CSS设置所述元素的视域属性为视域预设值；

基于CSS修改所述元素的呈现样式属性为三维样式；

基于CSS设置所述元素的转动属性为转动预设值；

建立HTML文档，所述HTML文档中包括若干内容；

在所述HTML文档的所述内容上引用所述元素；

解析所述HTML文档。

其中，当设置视域预设值的同时可以设置z轴的值，如可以将z轴的长度设置为0。

其中，呈现样式属性默认为平面样式。

其中，既可以直接在建立的html的文档的标签中元素中引用CSS样式，也可以通过在在html头部放入style样式来引用相关CSS样式，也可以将样式文件单独写一个文档，通过@import(一种引用方法)引用外部文件的方法等来引用。

其中，本发明中的3D网页可以是放在万维网(World Wide Web)的某个网站上。

本发明中的用于实现三维页面的方法，通过将用于控制浏览器外观的CSS中的2D定位属性扩展为3D定位属性，通过更改转动属性值，可以使得解析的网页页面呈现出立体感、深度感，本发明中的实现三维页面的方法不仅无需设置复杂的函数、也无需填入大量的数值，通过简单的方式扩展CSS中的属性而可以实现纵深感的3D网页的外观，进一步给用户好的观感，另一方面，提高3D显示方式的灵活度的同时也加快了网页的加载速度。

较佳地，所述转动属性包括转到转动方向属性及转动角度属性。

其中，转动方向属性包括：x轴的左、中心、右、长度、百分比，y轴的上、中心、底部、长度、百分比，z轴的长度，其表示改变被转换元素的位置。

其中，转动角度属性中的数字当为正数时为顺时针旋转，当为负数为逆时针旋转，既可以沿x轴方向旋转、也可以沿y轴方向旋转，也可以沿z轴方向旋转。

本实施例中，根据转动方向属性及转动角度属性的配合可以实现网页页面不同的三维效果。

较佳地，创建至少一元素的步骤包括：

创建一父元素；

在所述父元素中创建至少一子元素；

基于CSS设置所述元素的视域属性为视域预设值的步骤包括：基于CSS设置所述父元素的视域属性为视域预设值；

基于CSS修改所述元素的呈现样式属性为三维样式的步骤包括：基于CSS修改所述父元素的呈现样式属性为三维样式；

基于CSS设置所述元素的转动属性为转动预设值的步骤包括：基于CSS设置所述子元素的转动属性为转动预设值。

本发明通过在父元素中设置视域属性、及设置父元素的三维样式属性，可以在每一子元素中都呈现三维效果，并且可以设置多维的网页页面。

较佳地，在所述父元素中创建至少一子元素的步骤包括：

在所述父元素中创建六个子元素；

基于CSS设置所述元素的转动属性为转动预设值的步骤包括：分别设置每一所述子元素的转动属性；

所述HTML文档中包括六块内容，每一块内容分别与每一所述子元素一一对应。

本发明中，通过设置六个子元素，可以使网页页面呈现立方体的效果，从而进一步加深了网页页面的层次感与深度杆、进一步加强了用户体验度。

本发明还提供了一种基于CSS实现三维页面的系统，所述系统包括：元素创建模块、视域设置模块、样式修改模块、转动设置模块、文档建立模块、引用模块及解析模块；

所述元素创建模块用于创建至少一元素；

所述视域设置模块用于基于CSS设置所述元素的视域属性为视域预设值；

所述样式修改模块用于基于CSS修改所述元素的呈现样式属性为三维样式；

所述转动设置模块用于基于CSS设置所述元素的转动属性为转动预设值；

所述文档建立模块用于建立HTML文档，所述HTML文档中包括若干内容；

所述引用模块用于在所述HTML文档的所述内容上引用所述元素；

所述解析模块用于解析所述HTML文档。

其中，当设置视域预设值的同时可以设置z轴的值，如可以将z轴的长度设置为0。

其中，呈现样式属性默认为平面样式。

其中，既可以直接在建立的html的文档的标签中元素中引用CSS样式，也可以通过在在html头部放入style样式来引用相关CSS样式，也可以将样式文件单独写一个文档，通过@import引用外部文件的方法等来引用。

其中，本发明中的3D网页可以放在万维网的某个网站上。

本发明中的用于实现三维页面的方法，通过将用于控制浏览器外观的CSS中的2D定位属性扩展为3D定位属性，通过更改转动属性值，可以使得解析的网页页面呈现出立体感、深度感，本发明中的实现三维页面的方法不仅无需设置复杂的函数、也无需填入大量的数值，通过简单的方式扩展CSS中的属性而可以实现纵深感的3D网页的外观，进一步给用户好的观感，另一方面，提高3D显示方式的灵活度的同时也加快了网页的加载速度。

较佳地，所述转动属性包括转动方向属性及转动角度属性。

其中，转动方向属性包括：x轴的左、中心、右、长度、百分比，y轴的上、中心、底部、长度、百分比，z轴的长度，其表示改变被转换元素的位置。

其中，转动角度属性中的数字当为正数时为顺时针旋转，当为负数为逆时针旋转，既可以沿x轴方向旋转、也可以沿y轴方向旋转，也可以沿z轴方向旋转。

本实施例中，根据转动方向属性及转动角度属性的配合可以实现网页页面不同的三维效果。

较佳地，所述元素创建模块包括父元素创建单元和子元素创建单元；

所述父元素创建单元用于创建一父元素；

所述子元素创建单元用于在所述父元素中创建至少一子元素；

所述视域设置模块还用于基于CSS设置所述父元素的视域属性为视域预设值；

所述样式修改模块还用于基于CSS修改所述父元素的呈现样式属性为三维样式；

所述转动设置模块还用于基于CSS设置所述子元素的转动属性为转动预设值。

本元素通过在父元素中设置视域属性、及设置父元素的三维样式属性，可以在每一子元素中都呈现三维效果，并且可以设置多维的网页页面。

较佳地，所述子元素创建单元用于在所述父元素中创建六个子元素；

所述转动设置模块还用于分别设置每一所述子元素的转动属性；

所述HTML文档中包括六块内容，每一块内容分别与每一所述子元素一一对应。

本发明中，通过设置六个子元素，可以使网页页面呈现立方体的效果，从而进一步加深了网页页面的层次感与深度杆、进一步加强了用户体验度。

本发明还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于CSS实现三维页面的方法。

本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述基于CSS实现三维页面的方法的步骤。

本发明的积极进步效果在于：本发明中的用于实现三维页面的方法，通过将用于控制浏览器外观的CSS中的2D(二维)定位属性扩展为3D定位属性，通过更改转动属性值，可以使得解析的网页页面呈现出立体感、深度感，本发明中的实现三维页面的方法不仅无需设置复杂的函数、也无需填入大量的数值，通过简单的方式扩展CSS中的属性而可以实现纵深感的3D网页的外观，进一步给用户好的观感，另一方面，提高3D显示方式的灵活度的同时也加快了网页的加载速度。

附图说明

图1为本发明实施例1中的基于CSS实现三维页面的方法的流程图。

图2为没有应用本发明实施例1的方法的网页页面的效果图。

图3为应用本发明实施例1的方法的网页页面的效果图。

图4为本发明实施例2中的基于CSS实现三维页面的方法的流程图。

图5为没有应用本发明实施例2的方法的网页页面的效果图。

图6为应用本发明实施例2的方法的网页页面的效果图。

图7为本发明实施例3中的基于CSS实现三维页面的系统的模块示意图。

图8为根据本发明实施例5的电子设备的硬件结构示意图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

本实施例提供了一种基于CSS实现三维页面的方法，如图1所示，该方法包括：

步骤101、创建一元素。

步骤102、基于CSS设置该元素的视域属性为视域预设值。

步骤103、基于CSS修改该元素的呈现样式属性为三维样式。

步骤104、基于CSS设置该元素的转动属性为转动预设值。

步骤105、建立HTML文档。

步骤106、在HTML文档的内容上引用所述元素。

步骤107、解析该HTML文档。

其中，当设置视域预设值的同时可以设置z轴的值，如可以将z轴的长度设置为0。

其中，呈现样式属性默认为平面样式。

其中，既可以直接在建立的html的文档的标签中元素中引用CSS样式，也可以通过在在html头部放入style样式来引用相关CSS样式，也可以将样式文件单独写一个文档，通过@import引用外部文件的方法等来引用。

其中，本发明中的3D网页可以放在万维网的某个网站上。

其中，HTML文档中包括若干内容。

为了更好的理解本实施例，下面通过一个具体实例来对本实施例来做说明：

首先，创建一元素，而后将该元素的视域属性设置为500px，接着，修改该元素的呈现样式属性为preserve-3d(三维样式)，接着将该元素的转动属性设置为绕y轴的正方向转动45°，而后，建立一个html网页(应当理解，也可以在一开始就建立html网页，直接在该网页中创建元素)，该网页中包括内容“B”，在该内容上引用上述设置好的元素内容，图2为没有应用上述元素的网页的显示效果，图3为应用上述元素的网页的显示效果。

本实施例中的用于实现三维页面的方法，通过将用于控制浏览器外观的CSS中的2D定位属性扩展为3D定位属性，通过更改转动属性值，可以使得解析的网页页面呈现出立体感、深度感，本发明中的实现三维页面的方法不仅无需设置复杂的函数、也无需填入大量的数值，通过简单的方式扩展CSS中的属性而可以实现纵深感的3D网页的外观，进一步给用户好的观感，另一方面，提高3D显示方式的灵活度的同时也加快了网页的加载速度。

实施例2

本实施例提供了一种基于CSS实现三维页面的方法，如图4所示，该方法包括：

步骤201、建立HTML文档。

步骤202、创建一父元素。

步骤203、设置父元素的视域属性为视域预设值，修改修父元素的呈现样式属性为三维样式。

步骤204、在父元素中创建六个子元素。

步骤205、分别设置每一子元素的转动方向属性及转动角度属性。

步骤206、在HTML文档的内容上引用上述子元素。

步骤207、解析该HTML文档。

其中，转动方向属性包括：x轴的左、中心、右、长度、百分比，y轴的上、中心、底部、长度、百分比，z轴的长度，其表示改变被转换元素的位置。

其中，转动角度属性中的数字当为正数时为顺时针旋转，当为负数为逆时针旋转，既可以沿x轴方向旋转、也可以沿y轴方向旋转，也可以沿z轴方向旋转。

其中，默认状态下，X轴是水平的，左侧为正，y轴是垂直的，向下为正，z轴垂直于x轴和y轴形成的平面，正对着屏幕的方向为正。

为了更好的理解本实施例，下面举一个具体实例对本实施例进行说明：

首先，先建立一个Html文档，而后在该该文档中创建一个父元素，在该父元素下创建6个子元素，具体实现方式可以如下：

<div class＝“wrap”>

<div class＝“box”>

<div class＝“p1”></div>

<div class＝“p2”></div>

<div class＝“p3”></div>

<div class＝“p4”></div>

<div class＝“p5”></div>

<div class＝“p6”></div>

</div>

</div>

其中，wrap为本实施例中的父元素，p1，p2，p3，p4，p5，p6，为本实施例中的子元素。

其中，需要将父元素的视域属性设置为视域预设值，修改修父元素的呈现样式属性为三维样式。

接着，分别设置每一子元素的转动方向属性及转动角度属性。如，第二子元素设置为绕着Y轴逆时针转动90度，第一子元素设置为绕着Y轴顺时针转动90度，第三子元素设置为绕着X轴逆时针转动90度，第四子元素设置为绕着x轴顺时针转动90度，第五元素设置绕着z轴调整一定角度，第六子元素不变。

其具体设置方式实例如下：

上述代码表示在p2这个子元素中的转动方向为右，转动角度为沿y轴朝负方向转90度。

在分别设置好六个子元素的属性后，则可以在html网页页面的相关内容上引用上述六个子元素。

如，网页中包括的内容为数字“123456”，分别在数字1、2、3、4、5及6上使用本实施例创建的6个子元素，图5为没有应用本实施例中的方法直接解析的html的网页页面的效果图，图6为使用本实施例中方法后解析的html的网页页面的效果图。

本实施例中通过在父元素中设置视域属性、及设置父元素的三维样式属性，可以在每一子元素中都呈现三维效果，并且可以设置多维的网页页面。

本实施例中，通过设置六个子元素，可以使网页页面呈现立方体的效果，从而进一步加深了网页页面的层次感与深度感、进一步美化网页，加强了用户体验度，而具体事例中设置多少子元素，怎么设置子元素，或者需要将设置的子元素当做父元素，在该父元素(子元素)下进一步设置子元素都可以根据网页需要达到的效果自行进行设置。

实施例3

本实施例提供了一种基于CSS实现三维页面的系统，如图7所示，该系统包括：元素创建模块301、视域设置模块302、样式修改模块303、转动设置模块304、文档建立模块305、引用模块306及解析模块307。

元素创建模块301用于创建至少一元素；

视域设置模块302用于基于CSS设置所述元素的视域属性为视域预设值。

样式修改模块303用于基于CSS修改所述元素的呈现样式属性为三维样式。

转动设置模块304用于基于CSS设置所述元素的转动属性为转动预设值。

文档建立模块305用于建立HTML文档，所述HTML文档中包括若干内容。

引用模块306用于在HTML文档的所述内容上引用所述元素。

解析模块307用于解析所述HTML文档。

其中，当视域设置模块302设置视域预设值的同时可以设置z轴的值，如可以将z轴的长度设置为0。

其中，呈现样式属性默认为平面样式。

其中，引用模块306既可以直接在建立的html的文档的标签中元素中引用CSS样式，也可以通过在在html头部放入style样式来引用相关CSS样式，也可以将样式文件单独写一个文档，通过@import引用外部文件的方法等来引用。

其中，本发明中的3D网页可以放在万维网的某个网站上。

其中，HTML文档中包括若干内容。

为了更好的理解本实施例，下面通过一个具体实例来对本实施例来做说明：

首先，创建一元素，而后将该元素的视域属性设置为500px，接着，修改该元素的呈现样式属性为preserve-3d，接着将该元素的转动属性设置为绕y轴的正方向转动45°，而后，建立一个html网页(应当理解，也可以在一开始就建立html网页，直接在该网页中创建元素)，该网页中包括内容“B”，在该内容上引用上述设置好的元素内容，图2为没有应用上述元素的网页的显示效果，图3为应用上述元素的网页的显示效果。

本实施例中的用于实现三维页面的方法，通过将用于控制浏览器外观的CSS中的2D定位属性扩展为3D定位属性，通过更改转动属性值，可以使得解析的网页页面呈现出立体感、深度感，本发明中的实现三维页面的方法不仅无需设置复杂的函数、也无需填入大量的数值，通过简单的方式扩展CSS中的属性而可以实现纵深感的3D网页的外观，进一步给用户好的观感，另一方面，提高3D显示方式的灵活度的同时也加快了网页的加载速度。

实施例4

本实施例提供了一种基于CSS实现三维页面的系统，本实施例是对实施例3的改进，

本实施例的转动属性包括转动方向属性及转动角度属性。

元素创建模块301包括父元素创建单元和子元素创建单元。

父元素创建单元3011用于创建一父元素。

子元素创建单元3012用于在父元素中创建六个子元素。

视域设置模块302用于设置父元素的视域属性为视域预设值。

样式修改模块303用于修改父元素的呈现样式属性为三维样式。

转动设置模块304用于分别设置每一子元素的转动属性。

本实施例中的HTML文档中包括六块内容，每一块内容分别与每一所述子元素一一对应。

其中，转动方向属性包括：x轴的左、中心、右、长度、百分比，y轴的上、中心、底部、长度、百分比，z轴的长度，其表示改变被转换元素的位置。

其中，转动角度属性中的数字当为正数时为顺时针旋转，当为负数为逆时针旋转，既可以沿x轴方向旋转、也可以沿y轴方向旋转，也可以沿z轴方向旋转。

其中，默认状态下，X轴是水平的，左侧为正，y轴是垂直的，向下为正，z轴垂直于x轴和y轴形成的平面，正对着屏幕的方向为正。

为了更好的理解本实施例，下面举一个具体实例对本实施例进行说明：

首先，先建立一个Html文档，而后在该该文档中创建一个父元素，在该父元素下创建6个子元素，具体实现方式可以如下：

<div class＝“wrap”>

<div class＝“box”>

<div class＝“p1”></div>

<div class＝“p2”></div>

<div class＝“p3”></div>

<div class＝“p4”></div>

<div class＝“p5”></div>

<div class＝“p6”></div>

</div>

</div>

其中，wrap为本实施例中的父元素，p1，p2，p3，p4，p5，p6，为本实施例中的子元素。

其中，需要将父元素的视域属性设置为视域预设值，修改修父元素的呈现样式属性为三维样式。

接着，分别设置每一子元素的转动方向属性及转动角度属性。如，第二子元素设置为绕着Y轴逆时针转动90度，第一子元素设置为绕着Y轴顺时针转动90度，第三子元素设置为绕着X轴逆时针转动90度，第四子元素设置为绕着x轴顺时针转动90度，第五元素设置绕着z轴调整一定角度，第六子元素不变。

其具体设置方式实例如下：

上述代码表示在p2这个子元素中的转动方向为右，转动角度为沿y轴朝负方向转90度。

在分别设置好六个子元素的属性后，则可以在html网页页面的相关内容上引用上述六个子元素。

如，网页中包括的内容为数字“123456”，分别在数字1、2、3、4、5及6上使用本实施例创建的6个子元素，图5为没有应用本实施例中的方法直接解析的html的网页页面的效果图，图6为使用本实施例中方法后解析的html的网页页面的效果图。

本实施例中通过在父元素中设置视域属性、及设置父元素的三维样式属性，可以在每一子元素中都呈现三维效果，并且可以设置多维的网页页面。

本实施例中，通过设置六个子元素，可以使网页页面呈现立方体的效果，从而进一步加深了网页页面的层次感与深度感、进一步美化网页，加强了用户体验度，而具体事例中设置多少子元素，怎么设置子元素，或者需要将设置的子元素当做父元素，在该父元素(子元素)下进一步设置子元素都可以根据网页需要达到的效果自行进行设置。

实施例5

本实施例提供一种电子设备，电子设备可以通过计算设备的形式表现(例如可以为服务器设备)，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中处理器执行计算机程序时可以实现实施例1-实施例2中任意一基于CSS实现三维页面的方法。

图8示出了本实施例的硬件结构示意图，如图8所示，电子设备9具体包括：

至少一个处理器91、至少一个存储器92以及用于连接不同系统组件(包括处理器91和存储器92)的总线93，其中：

总线93包括数据总线、地址总线和控制总线。

存储器92包括易失性存储器，例如随机存取存储器(RAM)921和/或高速缓存存储器922，还可以进一步包括只读存储器(ROM)923。

存储器92还包括具有一组(至少一个)程序模块924的程序/实用工具925，这样的程序模块924包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

处理器91通过运行存储在存储器92中的计算机程序，从而执行各种功能应用以及数据处理，例如本发明实施例1-实施例2中任意一基于CSS实现三维页面的方法。

电子设备9进一步可以与一个或多个外部设备94(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口95进行。并且，电子设备9还可以通过网络适配器96与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器96通过总线93与电子设备9的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备9使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID(磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了电子设备的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

实施例6

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现实施例1-实施例2中任意一基于CSS实现三维页面的方法的步骤。

其中，可读存储介质可以采用的更具体可以包括但不限于：便携式盘、硬盘、随机存取存储器、只读存储器、可擦拭可编程只读存储器、光存储器件、磁存储器件或上述的任意合适的组合。

在可能的实施方式中，本发明还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行实现实施例1-实施例2中任意一基于CSS实现三维页面的方法的步骤。

其中，可以以一种或多种程序设计语言的任意组合来编写用于执行本发明的程序代码，所述程序代码可以完全地在用户设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户设备上部分在远程设备上执行或完全在远程设备上执行。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims (10)

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设置所述元素的视域属性为视域预设值；

所述样式修改模块用于基于CSS修改所述元素的呈现样式属性为三维样式；

所述转动设置模块用于基于CSS设置所述元素的转动属性为转动预设值；

所述文档建立模块用于建立HTML文档，所述HTML文档中包括若干内容；

所述引用模块用于在所述HTML文档的所述内容上引用所述元素；

所述解析模块用于解析所述HTML文档。

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

7.如权利要求5所述的基于CSS实现三维页面的方法，其特征在于，

所述元素创建模块包括父元素创建单元和子元素创建单元；

所述父元素创建单元用于创建一父元素；

所述子元素创建单元用于在所述父元素中创建至少一子元素；

所述视域设置模块还用于基于CSS设置所述父元素的视域属性为视域预设值；

所述样式修改模块还用于基于CSS修改所述父元素的呈现样式属性为三维样式；

所述转动设置模块还用于基于CSS设置所述子元素的转动属性为转动预设值。

8.如权利要求7所述的基于CSS实现三维页面的系统，其特征在于，所述子元素创建单元用于在所述父元素中创建六个子元素；

所述转动设置模块还用于分别设置每一所述子元素的转动属性；

所述HTML文档中包括六块内容，每一块内容分别与每一所述子元素一一对应。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至4任一项所述的基于CSS实现三维页面的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至4任一项所述的基于CSS实现三维页面的方法的步骤。

Images