css实现一个太阳金字塔三维旋转效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现一个太阳金字塔三维旋转效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
        --brown1: #b59970;
  --brown2: #ab926d;
  --behind: #84735c;
        --stair1: #caab7d;
        --stair2: #887c6a;
        --stair3: #353535;
}

body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        perspective: 100vmin;
        /*transform: scale(2);*/
        background: radial-gradient(#ff9800d4, #ffeb3bf2);
}



/*** PYRAMID ***/

.pyramid {
        width: 50vmin;
        height: 50vmin;
        transform: rotateX(65deg) rotateZ(20deg);
        transform-style: preserve-3d;
        animation: spin 15s linear 0s infinite;
        overflow: visible;
        box-shadow: 0 0 0.25vmin 0.15vmin var(--metal-color) inset;
        background: #795548;
        position: absolute;
        transition: all 0.5s ease 0s;
}

@keyframes spin {
        0% { transform: rotateX(65deg) rotateZ(20deg); }
        100% { transform: rotateX(65deg) rotateZ(380deg); }
}

.pyramid > span {
        width: 100%;
        height: 40vmin;
        position: absolute;
        box-sizing: border-box;
        background-color: var(--behind);
        background-image: 
                linear-gradient(335deg, var(--brown1) 6px, transparent 6px), 
                linear-gradient(155deg, var(--brown1) 6px, transparent 6px), 
                linear-gradient(335deg, var(--brown2) 6px, transparent 6px),
                linear-gradient(155deg, var(--brown2) 6px, transparent 6px);
        background-size: 14px 14px;
        background-position: 0px 0px, 1px 8px, 7px 7px, 8px 1px;
        clip-path: polygon(10.25% 85%, 89.75% 85%, 100% 100%, 0% 100%);
        transition: all 0.5s ease 0s;
}

.pyramid > span:nth-child(odd) {
        filter: brightness(0.75);
}

.pyramid > span:nth-child(1) {
        transform: rotateX(-31.25deg);
        transform-origin: center bottom;
        bottom: 0;
}

.pyramid > span:nth-child(2) {
        transform: rotateY(31.25deg) rotateZ(-90deg) translate3d(20vmin, -20vmin, 0vmin);
        transform-origin: right center;
        right: 0;
}

.pyramid > span:nth-child(3) {
        transform: rotateX(31.25deg) rotateZ(180deg) translate3d(0vmin, -40vmin, 0vmin);
        transform-origin: center top;
        top: 0;
}

.pyramid > span:nth-child(4) {
        transform: rotateY(-31.25deg) rotateZ(90deg) translate3d(-20vmin, -20vmin, 0vmin);
        transform-origin: left center;
        left: 0;
}

.pyramid > span:nth-child(5) {
        transform: rotateY(0deg) rotateZ(90deg) translate3d(-37.15%, -63.15%, 3.05vmin);
        transform-origin: left center;
        left: 0;
        clip-path: none;
        width: 79.5%;
        border-bottom: 0;
        filter: brightness(1.4);
        height: 79.5%;
}


.pyramid.f1:before {
        content: "";
        background: #000;
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translateZ(-10vmin);
        box-shadow: 0 0 2vmin 2vmin #000000;
        opacity: 0.15;
}






/*** PYRAMID F2 ***/

.pyramid.f2 {
        margin-bottom: 6vmin;
        width: 38vmin;
        height: 38vmin;
}

.pyramid.f2 > span {
   clip-path: polygon(13.5% 85%, 86.5% 85%, 100% 100%, 0% 100%);
}

.pyramid.f2 > span:last-of-type {
        clip-path: none;
        width: 73.25%;
        height: 73.25%;
        transform: rotateY(0deg) rotateZ(90deg) translate3d(-31.9%, -68.5%, 3.05vmin);
}



/*** PYRAMID F3 ***/

.pyramid.f3 {
        margin-bottom: 12vmin;
        width: 26vmin;
        height: 26vmin;
}

.pyramid.f3 > span {
  clip-path: polygon(19.5% 85%, 80.5% 85%, 100% 100%, 0% 100%);
}

.pyramid.f3 > span:last-of-type {
        clip-path: none;
        width: 61.15%;
        height: 61.15%;
        transform: rotateY(0deg) rotateZ(90deg) translate3d(-18.25%, -81.75%, 3.05vmin);
}



/*** PYRAMID F4 ***/

.pyramid.f4 {
        margin-bottom: 17.75vmin;
        width: 14vmin;
        height: 14vmin;
}

.pyramid.f4 > span {
   clip-path: polygon(10.5% 95.5%, 89.5% 95.5%, 100% 100%, 0% 100%);
}

.pyramid.f4 > span:last-of-type {
        clip-path: none;
        width: 78%;
        height: 78%;
        transform: rotateY(0deg) rotateZ(90deg) translate3d(-36%, -63.75%, 0.925vmin);
}



/*** PYRAMID F5 ***/

.pyramid.f5 {
        margin-bottom: 19.75vmin;
        width: 10vmin;
        height: 10vmin;
}

.pyramid.f5 > span {
  clip-path: polygon(26.5% 92%, 72.5% 92%, 100% 100%, 0% 100%);
}

.pyramid.f5 > span:last-of-type {
        clip-path: none;
        width: 45%;
        height: 45%;
        transform: rotateY(0deg) rotateZ(90deg) translate3d(10.5%, -110.5%, 1.65vmin);
}




/*** PYRAMID F6 - TEMPLE ***/

.pyramid.f6 {
        margin-bottom: 23.05vmin;
        width: 3vmin;
        height: 3vmin;
}

.pyramid.f6 > span {
        clip-path: polygon(0% 95%, 90% 95%, 100% 100%, 0% 100%);
        clip-path: none;
        width: 3vmin;
        height: 1vmin;
}

.pyramid.f6 > span:nth-child(1) {
  transform: rotateX(-90deg);
}
.pyramid.f6 > span:nth-child(2) {
  transform: rotateY(90deg) rotateZ(-90deg) translate3d(0.5vmin, -0.5vmin, 0vmin);
}

.pyramid.f6 > span:nth-child(3) {
  transform: rotateX(90deg) rotateZ(180deg) translate3d(0vmin, -1vmin, 0vmin);
}

.pyramid.f6 > span:nth-child(4) {
  transform: rotateY(-90deg) rotateZ(90deg) translate3d(-0.5vmin, -0.5vmin, 0vmin);
}

.pyramid.f6 > span:before {
        content: "";
        background: #424242;
        width: 1vmin;
        height: 0.7vmin;
        position: absolute;
        bottom: 0;
        left: calc(50% - 0.5vmin);
}

.pyramid.f6 > span:last-of-type {
        clip-path: none;
        width: 100%;
        height: 100%;
        transform: rotateY(0deg) rotateZ(90deg) translate3d(-50%, -50%, 1vmin);
}

.pyramid.f6 > span:last-of-type:before {
        display: none;
}










/*** STAIRS ***/

.pyramid.f1 > span:nth-child(2):before, .pyramid.f1 > span:nth-child(2):after, .pyramid.f2 > span:nth-child(2):before, .pyramid.f3 > span:nth-child(2):before, .pyramid.f3 > span:nth-child(2):after, .pyramid.f4 > span:nth-child(2):before, .pyramid.f5 > span:nth-child(2):before,
.flatcube.f0 > span:nth-child(1):before,
.flatcube.f0 > span:nth-child(4):before {
        content: "";
        height: 6vmin;
        bottom: 0;
        background: repeating-linear-gradient(0deg, var(--stair2) 0, var(--stair2) 0.15vmin, var(--stair3) 0.38vmin);
        width: 3vmin;
        position: absolute;
        left: calc(50% - 2vmin);
        border-right: 0.5vmin solid var(--stair1);
        border-left: 0.5vmin solid var(--stair1);
}

.pyramid.f1 > span:nth-child(2):before, .pyramid.f1 > span:nth-child(2):after {
        width: 1.25vmin;
        transform: rotate(15deg);
        background: repeating-linear-gradient(-15deg, var(--stair2) 0, var(--stair2) 0.15vmin, var(--stair3) 0.38vmin);
        height: 8vmin;
        bottom: -1vmin;
        left: calc(50% - 6vmin);
}
.pyramid.f1 > span:nth-child(2):after {
        width: 1.25vmin;
        transform: rotate(-15deg);
        background: repeating-linear-gradient(15deg, var(--stair2) 0, var(--stair2) 0.15vmin, var(--stair3) 0.378vmin);
        height: 8vmin;
        bottom: -1vmin;
        left: calc(50% + 3.85vmin);
}

.pyramid.f3 > span:nth-child(2):before, .pyramid.f3 > span:nth-child(2):aft.........完整代码请登录后点击上方下载按钮下载查看