用css创建一个三角形的原理,利用css构造一个三角形
今天读了篇关于如何使用css3创建三维(三维的缩写)四面体的文章，觉的相当不错，所以拿出来和大家分享一下。
首先要和大家分享的是，如何使用网页设计创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。html: 复制代码代码如下：
div id=金字塔
分区/分区
/divcss:复制代码代码如下：
style type=text/css
#金字塔{
位置：相对；
边距：100像素自动；
高度：500像素
宽度：100像素
}
#金字塔部门{
位置：绝对；
边框样式：纯色；
边框宽度：200像素0 200像素346像素
}
#金字塔div:在{
位置：绝对；
内容：三角形；
颜色：# fff
左：-250 px；
文本对齐：居中；
}
#金字塔div:第一个孩子{
边框-颜色：#ff0000透明#ff0000 rgba(50，50，50，0.6)；
}
/style运行效果:
超文本标记语言代码中我们定义了两个div，外部差异是容器对象，内部差异用来生成三角形100 .半铸钢钢性铸铁(Cast Semi-Steel)代码中，我们没有为内部差异设置宽度和高度，只设置了边界三个边的宽度（上、下和左)。通过为三个边设置不同颜色，他们会分别变成三个不同的三角形。
这时，我们只需要简单的将上下两边的颜色设置为透明色，一个等边三角形就出现了。复制代码代码如下：
#金字塔div:第一个孩子{
边框-颜色：透明透明rgba(50，50，50，0.6)；
}
效果图：
其中，红圈所示的地方就是内部差异所在位置。他是个看不见的，0宽度0高度，但又实际存在的对象。
我们接下来要讲的是如何实现三维(三维的缩写)四面体和如何创建动画。
首先还是粘贴相关的代码。
html:复制代码代码如下：
div id=金字塔
分区/分区
分区/分区
分区/分区
分区/分区
/div原理解析:复制代码代码如下：
style type=text/css
#金字塔{
位置：相对；
边距：100像素自动；
高度：500像素
宽度：100像素
-WebKit-transform-style:preserve-3d；
-网络工具包-动画：自旋10s线性无限；
-WebKit-transform-origin:116 px 200 px 116 px；
-moz-transform-style:preserve-3d；
蚊子动画：自旋10s线性无限；
-moz-transform-origin:116 px 200 px 116 px；
-ms-transform-style:preserve-3d；
-ms-动画：自旋10s线性无限；
-ms-transform-origin:116 px 200 px 116 px；
变换样式：保留-3d；
动画：自旋10s线性无限；
变换-原点：116 px 200 px 116 px
}
@-网络工具包-关键帧旋转{
从{
-WebKit-transform:rotateX(0 deg)rotateY(0 deg)rotateZ(0 deg)；
}
到{
-WebKit-transform:rotateX(360度)rotateY(360度)rotateZ(360度)；
}
}
@-蚊子-关键帧旋转{
从{
-moz-transform:rotateX(0 deg)rotateY(0 deg)rotateZ(0 deg)；
}
到{
-moz-transform:rotateX(360度)rotateY(360度)rotateZ(360度)；
}
}
@-毫秒-关键帧旋转{
从{
-ms-transform:rotateX(0 deg)rotateY(0 deg)rotateZ(0 deg)；
}
到{
-ms-transform:rotateX(360度)rotateY(360度)rotateZ(360度)；
}
}
@关键帧旋转{
从{
transform:rotateX(0度)rotateY(0度)rotateZ(0度)；
}
到{
变换：rotateX(360度)rotateY(360度)rotateZ(360度);
}
}
#金字塔部门{
位置：绝对；
边框样式：纯色；
边框宽度：200像素0 200像素346像素
-WebKit-transform-origin:0 0；
-moz-transform-origin:0 0；
-ms-transform-origin:0 0；
转换原点：0 0;
}
#金字塔div:在{
位置：绝对；
内容：三角形；
颜色：# fff
左：-250 px；
文本对齐：居中；
}
#金字塔div:第一个孩子{
边框-颜色：透明透明rgba(50，50，50，0.6)；
-WebKit-transform:rotateY(-19.5 deg)rotateX(180 deg)translate y(-400 px)；
-moz-transform:rotateY(-19.5 deg)rotateX(180 deg)translate y(-400 px)；
-ms-transform:rotateY(-19.5 deg)rotateX(180 deg)translate y(-400 px)；
transform:rotateY(-19.5度)rotateX(180度)translate y(-400像素)；
}
#金字塔分区：第n个子级(2) {
边框-颜色：透明透明rgba(50，50，50，0.6)；
-WebKit-transform:rotateY(90度)rotateZ(60度)rotateX(180度)translate y(-400 px)；
-moz-transform:rotateY(90度)rotateZ(60度)rotateX(180度)translate y(-400 px)；
-ms-transform:rotateY(90度)rotateZ(60度)rotateX(180度)translate y(-400 px)；
变换：旋转(90度)rotateZ(60度)rotateX(180度)平移y(-400 px)；
}
#金字塔分区：第n个子级(3) {
边框颜色：透明透明rgba(50，50，50，0.9)；
-WebKit-transform:rotateX(60度)rotateY(19.5度);
-moz-transform:rotateX(60度)rotateY(19.5度);
-ms-transform:rotateX(60度)rotateY(19.5度);
变换：rotateX(60度)rotateY(19.5度);
}
#金字塔分区：第n个子级(4) {
边框颜色：透明透明rgba(50，50，50，0.8)；
-WebKit-transform:rotateX(-60度)rotateY(19.5度)平移x(-116 px)平移y(-200 px)平移z(326 px)；
-moz-transform:rotateX(-60度)rotateY(19.5度)平移x(-116 px)平移y(-200 px)平移z(326 px)；
-ms-transform:rotateX(-60度)rotateY(19.5度)平移x(-116 px)平移y(-200 px)平移z(326 px)；
转换：rotateX(-60度)rotateY(19.5度)平移x(-116 px)平移y(-200 px)平移z(326 px)；
}
/风格
现在开始相关代码的讲解。
超文本标记语言代码和之前的差不多，就是多了三个div，分别作为四面体的另外三个面。
钢性铸铁代码中，我们使用#金字塔分区：第n个子级(名词)寻找到三面体的四个面，设置边界四个边的颜色，将他们分别定义成三角形。通过改变属性的旋转，旋转，平移和翻译方法，设置他们在3维空间中的角度、朝向和位置。这里涉及到很多数学知识，大家需要去补充相关知识。
通过上述设置，四面体就形成了。接下来就是为其添加动画效果。这里使用的东西也很简单，就是动画和关键帧. css3相关属性，大家可以到http://www.w3schools.com/css3/default.asp站点去学习，我这里就不做过多讲解了。
本文到此为止，大家可以把超文本标记语言和钢性铸铁代码粘贴在一起，查看最终效果。
代码里面有不懂的内容，大家可以给我留言。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。