3d金字塔用css3动画,纯css实现旋转的金字塔

可以使用CSS3的transform属性来实现3D金字塔的旋转效果。以下是一个简单的示例代码：

HTML代码：

<div class="pyramid">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="square"></div>
</div>

CSS代码：

.pyramid {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: rotate-pyramid 5s linear infinite;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 75px 75px 0 0;
  border-color: #ffcc00 transparent transparent transparent;
  transform-origin: bottom center;
}

.triangle:nth-child(1) {
  transform: rotateY(0deg) translateZ(75px);
}

.triangle:nth-child(2) {
  transform: rotateY(90deg) translateZ(75px);
}

.triangle:nth-child(3) {
  transform: rotateY(-90deg) translateZ(75px);
}

.triangle:nth-child(4) {
  transform: rotateY(180deg) translateZ(75px);
}

.square {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 75px;
  height: 75px;
  background-color: #ffcc00;
  transform: translateZ(75px);
}

@keyframes rotate-pyramid {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

这段代码会生成一个金字塔，其中包括四个三角形和一个正方形。四个三角形分别位于金字塔的四个侧面，而正方形则位于金字塔的底部。使用transform属性来使得三角形和正方形沿着Z轴旋转。通过使用animation属性来实现金字塔的旋转效果。