HTML怎么制作金字塔,CSS3 金字塔

CSS

语言：

CSSSCSS

确定

body {

overflow: hidden;

background: #000;

}

body * {

position: absolute;

top: 50%;

left: 50%;

}

.scene {

overflow: hidden;

margin: -15em;

width: 30em;

height: 30em;

perspective: 40em;

perspective-origin: 50% calc(50% - 20em);

}

.scene * {

transform-style: preserve-3d;

}

.pyramid {

transform: rotateY(-45deg);

}

.rotor {

animation: rot 4s linear infinite;

}

@keyframes rot {

to {

transform: translateY(-2em) rotateY(-0.5turn);

}

}

.level:nth-child(1) {

transform: translateY(-11em);

animation: lani-1 4s linear infinite;

}

.level:nth-child(1) .side {

margin-left: -1em;

width: 2em;

}

.level:nth-child(1) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(1em);

}

.level:nth-child(1) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(1em);

}

.level:nth-child(1) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(1em);

}

.level:nth-child(1) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(1em);

}

@keyframes lani-1 {

to {

transform: translateY(-11em) scale3d(0.001, 1, 0.001);

}

}

.level:nth-child(2) {

transform: translateY(-9em);

animation: lani-2 4s linear infinite;

}

.level:nth-child(2) .side {

margin-left: -3em;

width: 6em;

}

.level:nth-child(2) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(3em);

}

.level:nth-child(2) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(3em);

}

.level:nth-child(2) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(3em);

}

.level:nth-child(2) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(3em);

}

@keyframes lani-2 {

to {

transform: translateY(-9em) scale3d(0.33333, 1, 0.33333);

}

}

.level:nth-child(3) {

transform: translateY(-7em);

animation: lani-3 4s linear infinite;

}

.level:nth-child(3) .side {

margin-left: -5em;

width: 10em;

}

.level:nth-child(3) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(5em);

}

.level:nth-child(3) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(5em);

}

.level:nth-child(3) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(5em);

}

.level:nth-child(3) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(5em);

}

@keyframes lani-3 {

to {

transform: translateY(-7em) scale3d(0.6, 1, 0.6);

}

}

.level:nth-child(4) {

transform: translateY(-5em);

animation: lani-4 4s linear infinite;

}

.level:nth-child(4) .side {

margin-left: -7em;

width: 14em;

}

.level:nth-child(4) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(7em);

}

.level:nth-child(4) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(7em);

}

.level:nth-child(4) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(7em);

}

.level:nth-child(4) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(7em);

}

@keyframes lani-4 {

to {

transform: translateY(-5em) scale3d(0.71429, 1, 0.71429);

}

}

.level:nth-child(5) {

transform: translateY(-3em);

animation: lani-5 4s linear infinite;

}

.level:nth-child(5) .side {

margin-left: -9em;

width: 18em;

}

.level:nth-child(5) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(9em);

}

.level:nth-child(5) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(9em);

}

.level:nth-child(5) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(9em);

}

.level:nth-child(5) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(9em);

}

@keyframes lani-5 {

to {

transform: translateY(-3em) scale3d(0.77778, 1, 0.77778);

}

}

.level:nth-child(6) {

transform: translateY(-1em);

animation: lani-6 4s linear infinite;

}

.level:nth-child(6) .side {

margin-left: -11em;

width: 22em;

}

.level:nth-child(6) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(11em);

}

.level:nth-child(6) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(11em);

}

.level:nth-child(6) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(11em);

}

.level:nth-child(6) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(11em);

}

@keyframes lani-6 {

to {

transform: translateY(-1em) scale3d(0.81818, 1, 0.81818);

}

}

.level:nth-child(7) {

transform: translateY(1em);

animation: lani-7 4s linear infinite;

}

.level:nth-child(7) .side {

margin-left: -13em;

width: 26em;

}

.level:nth-child(7) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(13em);

}

.level:nth-child(7) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(13em);

}

.level:nth-child(7) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(13em);

}

.level:nth-child(7) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(13em);

}

@keyframes lani-7 {

to {

transform: translateY(1em) scale3d(0.84615, 1, 0.84615);

}

}

.level:nth-child(8) {

transform: translateY(3em);

animation: lani-8 4s linear infinite;

}

.level:nth-child(8) .side {

margin-left: -15em;

width: 30em;

}

.level:nth-child(8) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(15em);

}

.level:nth-child(8) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(15em);

}

.level:nth-child(8) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(15em);

}

.level:nth-child(8) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(15em);

}

@keyframes lani-8 {

to {

transform: translateY(3em) scale3d(0.86667, 1, 0.86667);

}

}

.level:nth-child(9) {

transform: translateY(5em);

animation: lani-9 4s linear infinite;

}

.level:nth-child(9) .side {

margin-left: -17em;

width: 34em;

}

.level:nth-child(9) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(17em);

}

.level:nth-child(9) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(17em);

}

.level:nth-child(9) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(17em);

}

.level:nth-child(9) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(17em);

}

@keyframes lani-9 {

to {

transform: translateY(5em) scale3d(0.88235, 1, 0.88235);

}

}

.level:nth-child(10) {

transform: translateY(7em);

animation: lani-10 4s linear infinite;

}

.level:nth-child(10) .side {

margin-left: -19em;

width: 38em;

}

.level:nth-child(10) .side:nth-child(1) {

transform: rotateY(0deg) translateZ(19em);

}

.level:nth-child(10) .side:nth-child(2) {

transform: rotateY(90deg) translateZ(19em);

}

.level:nth-child(10) .side:nth-child(3) {

transform: rotateY(180deg) translateZ(19em);

}

.level:nth-child(10) .side:nth-child(4) {

transform: rotateY(270deg) translateZ(19em);

}

@keyframes lani-10 {

to {

transform: translateY(7em) scale3d(0.89474, 1, 0.89474);

}

}

.level:first-child .side:nth-child(n + 3) {

display: none;

}

.side {

margin: -1em;

width: 2em;

height: 2em;

backface-visibility: hidden;

}

.side:nth-child(odd) {

background: #6da9ff;

}

.side:nth-child(even) {

background: #8dff6d;

}