应用css建立3角形 应用CSS3建立3d4面体基本原理及

日期:2021-02-26 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

今日读了篇有关怎样应用css3建立3d4面体的文章内容,觉的非常非常好,因此拿出来和大伙儿共享1下。 
最先要和大伙儿共享的是,怎样应用div+css建立3角形。在这里我先把有关编码粘贴出来,随后再为大伙儿解读基本原理。
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: ⑵50px;
text-align: center;
}
#pyramid > div:first-child {
border-color: #ff0000 transparent #ff0000 rgba(50, 50, 50, 0.6);
}
</style>
 
运作实际效果

基本原理分析:
html编码中大家界定了两个div,外界div是器皿目标,內部div用来转化成3角形。css编码中,大家沒有为內部div设定宽度和高宽比,只设定了border3个边的宽度(上、下和左)。根据为3个边设定不一样色调,她们会各自变为3个不一样的3角形。
这时候,大家只必须简易的将左右两侧的色调设定为全透明色,1个等边3角形就出現了。

拷贝编码
编码以下:

#pyramid > div:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}

实际效果图:
 
在其中,红圈所示的地区便是內部div所属部位。他是个看看不到的,0宽度0高宽比,但又具体存在的目标。
大家接下来要讲的是怎样完成3d4面体和怎样建立动漫。
最先還是粘贴有关的编码。
html:

拷贝编码
编码以下:

<div id="pyramid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

css

拷贝编码
编码以下:

<style type="text/css">
#pyramid {
position: relative;
margin: 100px auto;
height: 500px;
width: 100px;
-webkit-transform-style: preserve⑶d;
-webkit-animation: spin 10s linear infinite;
-webkit-transform-origin: 116px 200px 116px;
-moz-transform-style: preserve⑶d;
-moz-animation: spin 10s linear infinite;
-moz-transform-origin: 116px 200px 116px;
-ms-transform-style: preserve⑶d;
-ms-animation: spin 10s linear infinite;
-ms-transform-origin: 116px 200px 116px;
transform-style: preserve⑶d;
animation: spin 10s linear infinite;
transform-origin: 116px 200px 116px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@-ms-keyframes spin {
from {
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes spin {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
#pyramid > div {
position: absolute;
border-style: solid;
border-width: 200px 0 200px 346px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
#pyramid > div:after {
position: absolute;
content: "Triangle";
color: #fff;
left: ⑵50px;
text-align: center;
}
#pyramid > div:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(⑴9.5deg) rotateX(180deg) translateY(⑷00px);
-moz-transform: rotateY(⑴9.5deg) rotateX(180deg) translateY(⑷00px);
-ms-transform: rotateY(⑴9.5deg) rotateX(180deg) translateY(⑷00px);
transform: rotateY(⑴9.5deg) rotateX(180deg) translateY(⑷00px);
}
#pyramid > div:nth-child(2) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(⑷00px);
-moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(⑷00px);
-ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(⑷00px);
transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(⑷00px);
}
#pyramid > div:nth-child(3) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
-webkit-transform: rotateX(60deg) rotateY(19.5deg);
-moz-transform: rotateX(60deg) rotateY(19.5deg);
-ms-transform: rotateX(60deg) rotateY(19.5deg);
transform: rotateX(60deg) rotateY(19.5deg);
}
#pyramid > div:nth-child(4) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
-webkit-transform: rotateX(⑹0deg) rotateY(19.5deg) translateX(⑴16px) translateY(⑵00px) translateZ(326px);
-moz-transform: rotateX(⑹0deg) rotateY(19.5deg) translateX(⑴16px) translateY(⑵00px) translateZ(326px);
-ms-transform: rotateX(⑹0deg) rotateY(19.5deg) translateX(⑴16px) translateY(⑵00px) translateZ(326px);
transform: rotateX(⑹0deg) rotateY(19.5deg) translateX(⑴16px) translateY(⑵00px) translateZ(326px);
}
</style>

如今刚开始有关编码的解读。
html编码和以前的类似,便是多了3个div,各自做为4面体的此外3个面。
css编码中,大家应用 #pyramid > div:nth-child(n) 找寻到3面体的4个面,设定border4个边的色调,将她们各自界定成3角形。根据transform特性的rotateX,rotateY,translateX,translateY和translateZ方式,设定她们在3维室内空间中的角度、房屋朝向和部位。这里涉及到到许多数学课专业知识,大伙儿必须去填补有关专业知识。

根据上述设定,4面体就产生了。接下来便是为其加上动漫实际效果。这里应用的物品也很简易,便是animation和keyframes。css3有关特性,大伙儿能够到http://www.w3schools.com/css3/default.asp站点去学习培训,我这里就不做过量解读了。

本文到此为止,大伙儿能够把html和css编码粘贴在1起,查询最后实际效果。
编码里边有不懂的內容,大伙儿能够给我留言。