声明:本来想做一个多面体相册的,但是在网上没有找到例子,最终完整代码是在一个英文程序网站上copy的,但是没有解释,我把大体实现流程解释了一遍,旋转真的是绕蒙我了···· 代码: <!DOCTYPE html> <html> <head> <title>二十面体</title> <style type="text/css"> html, body { height: 100%; margin: 0; background: rgba(0, 0, 0,1); } .sharp { animation: ani 4s linear infinite; } div { transform-style: preserve-3d; transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg); position: absolute; left: 50%; top: 50%; } span { /*利用边框做一个三角形*/ border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每个span下方设置颜色,其余边透明*/ border-width: 173.2px 100px; border-style: solid; width: 0; height: 0; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -346.4px; } span:before { /*利用边框在span中做一个三角形,实现嵌套,让span变成边框,span:before变成要显示的东西*/ content: ''; border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*设置每面的颜色*/ border-width: 165.2px 92px; border-style: solid; width: 0; height: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 4px; } div span:nth-child(1) { transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(2) { transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(3) { transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(4) { transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg); } div span:nth-child(5) { transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg); } .sharp div:nth-child(1) { transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(2) { transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(3) { transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(4) { transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px); } .sharp div:nth-child(5) { transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px); } @keyframes ani { 100% { transform: rotateY(360deg); } } </style> </head> <body> <div class="sharp"> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>
代码大体解读
一、
span { /*利用边框做一个三角形*/
border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每个span下方设置颜色,其余边透明*/
border-width: 173.2px 100px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -346.4px;
}
span:before { /*利用边框在span中做一个三角形,实现嵌套,让span变成边框,span:before变成要显示的东西*/
content: '';
border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*设置每面的颜色*/
border-width: 165.2px 92px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 4px;
}
先用一个0宽0高的盒子,将盒子的边框设置宽度
border-width: 173.2px 100px;
border-style: solid;
width: 0;
height: 0;
再将左 上 右颜色属性变为透明
border-color: transparent transparent blue transparent;
左 上 右都会看不见,就只剩下下边的,这样就变成一个三角形了
span:before 就是在三角形上在加一个三角形起到duo多出一个像边框的效果
二、
一个div中有五个span,那么通过上一步就做成了五个三角形,将这五个三角形进行3D位移加旋转
html
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
css
div span:nth-child(1) {
transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(2) {
transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(3) {
transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(4) {
transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);
}
div span:nth-child(5) {
transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);
}
变成这样 盖子一共由五个三角形组成
三、将上步的div做一个整体的3d变换
.sharp div:nth-child(1) {
transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px);
}
四、
在HTML中再加一个div,也进行整体移动,两者有重合的三角形
.sharp div:nth-child(2) {
transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px);
}
五、
再加三个div,继续变换,最终只差一个盖了
.sharp div:nth-child(3) {
transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(4) {
transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px);
}
.sharp div:nth-child(5) {
transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px);
}
六、
在加一个div,不用变换,因为本来的位置就是盖
七、最后加个旋转动画就可以了