快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

和记娱乐ag手机版:【HTML5实践教程】17、使用css3创建三角形和3D四面体实例



本日读了篇关于若何应用css3创建3d四面体的文章,觉的相称不错,以是拿出来和大年夜家分享一下。原文地址:http://www.paulrhayes.com/2010-10/css-tetrahedron/。

demo预览地址:http://www.paulrhayes.com/experiments/pyramid/。

首先要和大年夜家分享的是,若何应用div+css创建三角形。在这里我先把相关代码粘贴出来,然后再为大年夜家解说道理。

html:

div id="pyramid">

div>div> div>

css:

style type="text/css">

#pyramid {position: relative;

margin: 100px auto;height: 500px;

width: 100px;}

#pyramid > div {position: absolute;

border-style: solid;border-width: 200px 0 200px 346px;

}#pyramid > div:after {

position: absolute;content: "Triangle";

color: #fff;left: -250px;

text-align: center;}

#pyramid > div:first-child{border-color: #ff00和记娱乐ag手机版00 transparent #ff0000 rgba(50, 50, 50, 0.6);

} style>

运行效果:

道理解析:

html代码中我们定义了两个div,外部div是容器工具,内部div用来天生三角形。css代码中,我们没有为内部div设置宽度和高度,只设置了border三个边的宽度(上、下和左)。经由过程为三个边设置不合颜色,他们会分手变成三个不合的三角形。

这时,我们只必要简单的将高低两边的颜色设置为透明色,一个等边三角形就呈现了。

#pyramid > div:first-child{

border-color: 和记娱乐ag手机版transparent transparent transparent rgba(50, 50, 50, 0.6); }

效果图:

此中,红圈所示的地便利是内部div所在位置。他是个看不见的,0宽度0高度,但又实际存在的工具。

我们接下来要讲的是若何实现3d四面体和若何创建动画。

首先照样粘贴相关的代码。

html:

div id="pyramid">

div>div>div>div>

div>div>div>div>

div>

css:

现在开始相关代码的解说。

html和记娱乐ag手机版代码和之前的差不多,便是多了三个div,分手作为四面体的别的三个面。

css代码中,我们应用 #pyramid > div:nth-c和记娱乐ag手机版hild(n) 探求到三面体的四个面,设置border四个边的颜色,将他们分手定义成三角形。经由过程transform属性的rotateX,rotateY,translateX,translateY和translateZ措施,设置他们在3维空间中的角度、朝向和位置。这里涉及到很多半学常识,大年夜家必要去弥补相关常识。

经由过程上述设置,四面体就形成了。接下来便是为其添加动画效果。这里应用的器械也很简单,便是animation和keyframes。css3相关属性,大年和记娱乐ag手机版夜家可以到http://www.w3schools.com/css3/default.asp站点去进修,我这里就不做过多解说了。

本文到此为止,大年夜家可以把html和css代码粘贴在一路,查看终极效果。

代码里面有不懂的内容,大年夜家可以给我留言。

转自:http://www.cnblogs.com/softlover/archive/2012/12/31/2840752.html

您可能还会对下面的文章感兴趣: