揭秘CSS3创建三角形的神奇技巧
来聊聊咋用P和CSS画个三角形呗。给你看我码的东西，然后说说为啥这样弄。看看效果如何？
HTML里面，两段话一起放，外面那个就当壳儿用。里头的，咱们要看的三角形主持人才是重点。咋样，明白么？CSS那边，对里头那层没给定具体段落大小，只是把边线弄大了点儿。再涂涂色，小心脏，看，一堆彩色小三角形出来咯~
#pyramid {
position: relative;
margin: 100px auto;
height: 500px;
width: 100px;
}
#pyramid > p {
position: absolute;
border-style: solid;
border-width: 200px 0 200px 346px;
}
#pyramid > p:after {
position: absolute;
content: "Triangle";
color: #fff;
left: -250px;
text-align: center;
}
#pyramid > p:first-child {
border-color: #ff0000 transparent #ff0000 rgba(50, 50, 50, 0.6);
}
就这么简单！只需要让上、下两端变透明，就能轻松画出一个正宗的等边三角形。别忘了，那红圈儿里的小白点儿就是“p”。虽然看不见，大小为零，但真真实实地在那儿。
探寻3D四面体与动画的魅力
来咯，看看咋弄这个3D四面体活动起来！先瞅瞅要用啥代码呗~
好家伙，HTML中多出几个段落，都是关于这个四面体其他三面的介绍。至于CSS那部分，就直接用个#pyramid>p:nth-child(n)的方法，选取出每个面的元素，调整下边框颜色就行。这样一来，原本的矩形就可以变成可爱的三角形咯！
想在3D游戏中移动物体吗？其实只要用好rotateX、rotateY、translateX、translateY和translateZ这几个属性，再懂点儿基本数学原理就可以了~大家赶紧学起来！
深入剖析CSS3创建3D四面体
说说CSS3里的那个3D四面体！网上那些炫酷的立体效果就是靠它弄出来的~
#pyramid > p:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
实现这个视觉效果，其实只要用好 transform 和 perspective 两个属性就能搞定！transform 能帮你随心所欲地改变元素是在2D还是3D空间里变大缩小、转圈斜着；至于 perspecive，说的是你离想象中的z=0平面有多远呀～
记好了！要做出炫酷的3D效果，你得知道怎么运用旋转XYZ、缩放Z等那些变形公式，还要明白坐标系是咋回事儿！
挖掘CSS3动画制作技巧
来看看CSS3的神奇动效！让你的网页炫酷到炸裂，瞬间生动活泼！用CSS3制作动画简直比传统的JS方式简单又省事许多啦
知道？剧中的@keyframes真的很帮腔！它就像是个引导者，教你按照你想要的效果设置每一页。然后借助animation这个小伙伴，你就可以把这些动画给挂到你选的那部分去了。
看好了，制作动画时，要注意把时间函数跟播放状态配合得恰到好处，这样你的动画才能更生动活泼
总结与展望
学到今天超炫的CSS3四面立体和动画技巧！希望你对CSS3有更深了解！
亲爱滴朋友们记住，前端技术可不能止步不前，得更炫酷才行给用户带来更多新奇体验是我们的责任。要时刻关注最新的技能趋势，这样咱们才能快速提升自己的前端水平一起努力！
#pyramid {
position: relative;
margin: 100px auto;
height: 500px;
width: 100px;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 10s linear infinite;
-webkit-transform-origin: 116px 200px 116px;
-moz-transform-style: preserve-3d;
-moz-animation: spin 10s linear infinite;
-moz-transform-origin: 116px 200px 116px;
-ms-transform-style: preserve-3d;
-ms-animation: spin 10s linear infinite;
-ms-transform-origin: 116px 200px 116px;
transform-style: preserve-3d;
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 > p {
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 > p:after {
position: absolute;
content: "Triangle";
color: #fff;
left: -250px;
text-align: center;
}
#pyramid > p:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
-moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
-ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
}
#pyramid > p:nth-child(2) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
-moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
-ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
}
#pyramid > p: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 > p:nth-child(4) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
-webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
-moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
-ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
}
评论0