div+css实现立体金字塔图表示意图旋转动画代码-html代码-BFW代码库

div+css实现立体金字塔图表示意图旋转动画代码

代码语言：html

所属分类：图表

代码描述：div+css实现立体金字塔图表示意图旋转动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
  box-sizing: content-box;
}

body {
  background: #fffdf1;
}

.box {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
/* ------------ 0 ------------ */
.pyramid {
  width: 200px;
  height: 200px;
  margin: 3em auto -2rem;
  position: absolute;
  left: 50%;
  perspective-origin: center -75%;
}

.pyramid__inner {
  transform-style: preserve-3d;  
   transform: translateZ(-150px) translateX(-70%) rotateY(360deg); 
  
-webkit-animation: Anim 15s linear infinite; 
  
        animation: Anim 15s linear infinite;
}

@-webkit-keyframes Anim {
  0% { transform: translateZ(-150px) translateX(-75%) rotateY(0deg); }
  50% { transform: translateZ(-150px) translateX(75%) rotateY(180deg); }
  100% { transform: translateZ(-150px) translateX(-75%) rotateY(360deg); }
}

@keyframes Anim {
  0% { transform: translateZ(-150px) translateX(-75%) rotateY(0deg); }
  50% { tran.........完整代码请登录后点击上方下载按钮下载查看