CSS3通过3D变换实现20面立体形状

声明：本来想做一个多面体相册的，但是在网上没有找到例子，最终完整代码是在一个英文程序网站上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，不用变换，因为本来的位置就是盖

七、最后加个旋转动画就可以了

CSS3通过3D变换实现20面立体形状

猜你喜欢