CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。
三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。
触发方法1：告知浏览器变形方式
-webkit-transform-style:preserve-3dTips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。
Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。
触发方法2：直接使用CSS3变形语法
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>言成科技/title>
<style>
.box1 {
width: 150px
height: 150px
border: 2px solid blue
}
.box1 div {
height: 150px
background: rgba(0, 0, 0, 0.5)
-webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg)
transform: translate3d(30px, 60px, 20px) rotateX(30deg)
}
</style>
</head>
<body>
<div class="box1">
<div></div>
</div>
</body>
</html>
具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》
3D效果制作
需求
制作一个立方体，并进行旋转
代码实例
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8" />
<title>言成科技</title>
<link rel="stylesheet" type="text/css" href="https://css.h5course.cn/reset-1.0.0.css" />
<style>
.main-bac { -webkit-perspective:1500 } /*设定透视距离*/
.main{
width:200px
height:200px
margin: 0 auto
position:relative
-webkit-transform-style:preserve-3d
-webkit-transition:-webkit-transform 2s ease 0s/*过渡时间*/
}
/*基本样式*/
.main p{
position: absolute
margin: 0
padding: 0
width: 200px
height: 200px
text-align: center
line-height: 200px
font-size: 26px
opacity:0.5
}
/*将第一个元素Z轴向前移动100px，形成第一个面（正面）*/
.main p:nth-of-type(1) {
background-color:red
-webkit-transform:translateZ(100px)
}
/*将第一个元素Z轴向前移动100px，绕x轴旋转90度形成上面的面*/
.main p:nth-of-type(2) {
background-color:orange
-webkit-transform:rotateX(90deg) translateZ(100px)
}
/*将第一个元素Z轴向前移动100px，绕x轴旋转-90度形成下边的面*/
.main p:nth-of-type(3) {
background-color:yellow
-webkit-transform:rotateX(-90deg) translateZ(100px)
}
/*将第一个元素Z轴向前移动100px，绕y轴旋转90度形成右侧的面*/
.main p:nth-of-type(4) {
background-color:green
-webkit-transform:rotateY(90deg) translateZ(100px)
}
/*将第一个元素Z轴向前移动100px，绕y轴旋转-90度形成左侧的面*/
.main p:nth-of-type(5) {
background-color:#b435bf
-webkit-transform:rotateY(-90deg) translateZ(100px)
}
/*将第一个元素Z轴向前移动100px，绕y轴旋转180度形成后面（背面）*/
.main p:nth-of-type(6) {
background-color:blue
-webkit-transform:rotateY(180deg) translateZ(100px)
}
/*鼠标移入时绕Y轴旋转180度，绕Z轴旋转180度*/
.main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg) }
</style>
</head>
<body>
<div class="main-bac">
<div class="main">
<p>言成科技</p>
<p>3D立方体</p>
<p>HTML5学堂</p>
<p>3D立方体</p>
<p>码匠</p>
<p>JavaScript</p>
</div>
</div>
</body>
</html>
代码解析
当鼠标移入的时候，立方体逐渐的发生旋转（非突变），围绕X轴旋转45度的同时，围绕Y轴旋转45度。
当鼠标移出立方体时，立方体恢复到初始状态。在最开始状态时，并没有采用无限远的视角，设置一定的视角，让刚开始时直视立方体时，不会觉得是一个平面。
3D效果制作-目标效果图
以上资料来源：《HTML5布局之路》
2HTML，DHTML，VRML，XML功能分析与比较研究摘 要：按照标记语言的发展历程，对HTML，DHTML，VRML，XML的功能和特点进行比较分析。
关键词：Internet；Web；HTML；DHTML；VRML；XML；WWW；CSS；CGI；SML
随着Internet的普及和人们对Web日异增长的需求，需要不断有新的Web标记语言产生。本文按照标记语言的发展历程，对HTML，DHTML，VRML，XML的功能和特点进行比较分析。
1 HTML语言
HTML（Hyper TextMarkup Language，超文本标记语言），或称为“多媒体文件语言”，是用于创建Web页和Web信息发布的第一个通用语言。HTML以其简单精练的语法、极易掌握的通用性与易学性，使Web网页可以亲近于每一个普通人，Internet也才得以普及发展，以至今日的辉煌。
HTML语言是一种描述文档结构而不能描述实际的语言，用HTML语言书写的页面是普通的文本文档（ASCII），不含任何与平台和程序相关的信息，可以被任何文本编辑器读取，文字和图形可以同时在同一Page中显示。HTML文档包含2种信息：一是页面本身的文本；二是表示页面元素、结构、格式和其他超文本链接的HTML标签。
现在的HTML已经进入了第四代。第一代的Web页采用HTML1．0制作，其页面中的大部分都是文字，中间部分采用了一两幅图形。第二代的Web页采用HTML2．0制作，最主要的是增加了对表格的支持，使得WWW具有了交互功能，即可以进行信息的双向交流。目前的大多数浏览器都支持HTML2．0，在其页面中可以加入一些漂亮的背景，以表格的形式组织文字，同时提供在线的顺序表单。第三代的Web页采用HTML3．2制作，该版本增加了许多重要的标签，采用了富有创造性的页面布局、色彩控制、快速图像显示、字体显示和交互式的Web页，使得主页生动活泼、富有生机，制作主页也变得非常方便。第四代的HTML4．0和以前几个版本比较起来，除了将原有的标记扩充外，其最大的变革是可以将网页上的文字和图形当作对象，并通过Script（脚本）程序来控制，这种改变对于网页内容的动态显示或控制是非常重要的。同时CGI（Common Gateway Interface）能使Web有更强的交互功能。
HTML语言的特性可总结为以下几个方面：
（1）通用性 可实现不同平台的文档共享。
（2）可扩展性 HTML的标签集合可以根据新需求而不断修正或加入有限的新标签符，为实现有限的新功能的扩展提供保障。
（3）创建的灵活性 HTML文档是纯文本文档，可以由网页编辑器以及其他文本编辑软件创建。
2 DHTML语言
在WWW中发布HTML文档，大多数信息是静态的，而且要求服务器响应用户的交互。DHTML（Dynamic HTML）的出现，使Web范例从要求服务器交互改变为创建Web站点和Web应用。由于DHTML允许HTML文档与用户交互及客户机的巨大变化，则可以创建丰富的Web应用。
DHTML并不是什么新的技术，只不过是一些现有网页技术与标准的整合，主要包括以下一些内容：
（1）HTML4．0
（2）CSS
CSS（Cascading Style sheets，级联样式表），是W3C协会为了弥补HTML在样式编排上的不足，所制定的一种扩展式标准。由于HTML标记属性非常有限，且无法通过Script程序来控制，因此CSS扩充了HTML各标记的属性设定（称为样式），是网页内容视觉化效果有更多的变化，网页内容的表现方式也更灵活，更美观。
（3）浏览器对象模型
在4．0版以后的IE或Netscape都是对象化的，浏览器本身就是由许多对象所组成，这些对象有各自的属性、方法和事件。因此，网页设计者可通过Script程序来控制或调用这些对象。目前Microsot和Netscape的浏览器对象模型都是以W3C所公布的文件对象模型（DocumentObject Modle，DOM）为基础，再加上以扩展对象而组成。
（4）Script
Script是整个DHTML的灵魂角色，在DHTML里，网页之所以能够动起来，最主要的原因在于网页中的对象必须通过Script程序来控制，进行交互式操作。在不同的浏览器中，所使用的脚本语言不同。目前，Netscape里支持的Script是JavaScript，而IE所支持的则包括了JavaScript，JScript和VBScript。
总结以上技术，DHTML的结构可以表示为：DHTML＝HTML＋浏览器对象模型结构＋CSS＋Script。
DHTML的特点可以总结为：
（1）动态内容 通过浏览器与网页文字的对象模型，网页不用下载，其内容与对象即可以动态的增加、删除和改变显示内容。
（2）动态样式 CSS除了可以扩展HTML标记的样式属性外，还可以通过Script程序来改变这些属性。传统网页的内容与样式编排，在下载到浏览器后，是固定的，相比之下，以CSS定义的样式网页，只要通过Script控制，网页就算已经下载显示来了，还是可以改变其字体、颜色，甚至是样式的编排内容。
（3）绝对定位 以前的HTML只能定位网页对象的x，y坐标，现在DHTML可以定位网页对象的x，y，z坐标，也就是说，可以在网页上建立三维的立体空间。
3 VRML语言
VRML（VirtualReality Modeling Language）是一种模型语言，用来描述一个目标对象是如何呈现在Web上的。和HTML一样，VRML也是可由浏览器解释的描述语言，只不过VRML不是描述成一个Page的格式，而是描述成3D环境和目标的布局。HTML和VRML的差别与建筑物的蓝本和他的模型的差别是同一个道理。
VRML为虚拟环境的建立提供了规范，综合了现有三维软件的景象描述语言的优点，他有基本元素、顶点、线和面的定义，坐标变换有缩放（Scaling）、旋转（Rotation）和平移（Translation），并有优化的数据结构。
VRML浏览器作为VRML的解释器，其主要功能是读入VRML代码文件，并把他解释成一个图形映象。目前VRML浏览器软件种类很多，如：Netscape公司的Live3D，Paper Software公司的WebFX，SGI和Template Graphics Software公司的WebSpace，InterVista软件公司的World View，以及Microsoft公司的VirtualExplorer等。他们基本上实现了物体的变换效果，如灯光、视角变换、模糊、裁剪、阴影、投影和碰撞等。
VRML语言具有的基本物体有：球体、锥体、柱体、立方体和文本等为创建景象提供了方便，如下面为建立一个球体的实例：
目前有许多创建VRML文件的模型软件，并且有许多软件可以把其他三维格式的文件转换成VRML文件，如3DS，RAW等。VRML的出现使得虚拟现实像多媒体和Internet一样逐渐走进我们的生活，简单地说，以VRML为基础的第二代万维网可以表示为：“多媒体＋虚拟现实＋因特网”。第一代WWW是一种访问文档的媒体，能够提供阅读的感受，使那些对Windows风格的计算机环境熟悉的人们容易使用Internet，而以VRML为核心的第二代WWW将使用户如身处真实世界，在一个三维环境里随意探索因特网上无比丰富的巨大信息资源，每个人都可以从不同的路线进入虚拟世界，和虚拟物体交互，这样控制感受的就不再是计算机，而是用户自己，人们可以以习惯、自然的方式访问各种场所，在虚拟社区中“直接”交谈和交往。事实上，目前采用VRML技术取得成功的案例已经很多，例如探路者到达火星后的信息就是利用VRML在Internet上即时发布的，网络用户可以以三维方式随探路者探索火星。
VRML在电子商务、教育、工程技术、建筑、娱乐、艺术等领域的广泛应用，将会促使他迅速发展，并成为构建虚拟现实应用系统的基础。虚拟现实作为一种全新的人机接口技术，必须研究用户和计算机之间的协调关系问题，这样一个问题只有通过大量的使用才能逐步解决，VRML以Internet作为应用平台，最有希望成为构筑虚拟现实应用的基本构架。
总之，VRML将创造一种融多媒体、三维图形、网络通讯、虚拟现实为一体的新型媒体，兼具先进性和普及性。
4 XML语言
XML（eXtensible Markup Language，扩展标记语言）是Web中的新一代标记语言，是SGML的一个简化但严格的子集，他与SGML同属元标记语言。XML继承了SGML的3个特性，同时也具有HTML的灵活性和通用性，其特性主要表现在：
①确认性；
②结构化；
③可扩展性；④通用性；
⑤灵活性。
XML在三层架构上为数据处理提供了很好的方法。数据的集成、发送、处理和显示是图1所示过程中的每一个步骤。
CSS仍然被应用于结构简单的XML数据，但是，CSS不提供与数据源结构不同的数据显示结构。使用XSL，可以产生与原来的XML数据结构完全不同的表达结构。如图2所示。
XML的一个主要目标市场是电子商务。传统EDI（电子数据交换）机制依靠不同商业之间的强大计算机系统来实现压缩的信息传输，每一条信息在传输使用、提供给用户之前都必须编码，电子商务在网上运作时，用户端每填完一个HTML的表格之后，都要把表格法还给初始的服务器处理，产品交易、谈判签约、后勤管理、税收报表等这些活动的数据处理都集中在一端。可以预测到，有了XLL所链接的行为控制机构和XSL所提供的客户端评价功能，将来的数据可以从屏幕上抓取，有必要的话可在客户端处理，在处理数据时，传输给相关用户而不必改换数据格式。
XML的应用弥补了许多HTML的缺陷，我们把他在网上的应用总结为以下几点：
（1）当网络客户必须在不同的数据库之间传递信息时的应用；
（2）当需要把大部分从网络服务器下载的数据在用户端处理时的应用；
（3）当相同的数据对于不同的用户需要有不同的界面时的应用；
（4）当网络情报供货商要把发现的信息精心裁减，并发送给不同的个人用户时的应用。
![js正则表达式匹配以abc开头，以}或]或,结尾的字符串](/aiimages/js%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8C%B9%E9%85%8D%E4%BB%A5abc%E5%BC%80%E5%A4%B4%EF%BC%8C%E4%BB%A5%7D%E6%88%96%5D%E6%88%96%2C%E7%BB%93%E5%B0%BE%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2.png)
