Um die Y-Achse drehen, ohne die Position zu ändern

Ich versuche eine Pyramide zu bauen und sie zu animieren. Das Problem ist, nachdem ich es um die X-Achse gedreht habe, versuche ich, es um die Höhe der Pyramide (Y-Achse) zu drehen, aber ich bewege es jedes Mal. Ich habe grundsätzlich jede Transform-Herkunft ausprobiert, aber es funktioniert nicht. Mein Code ist folgende:Um die Y-Achse drehen, ohne die Position zu ändern

Danke für die Hilfe

.cube{ 
 
    margin: 100px 200px; 
 
} 
 

 
.pyramid{ 
 
    width: 0; 
 
    position: relative; 
 
    transform-style: preserve-3d; 
 
    animation: spin-pyramid 20s ease infinite alternate; 
 
} 
 

 
.base{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: rgba(255,0,0,.5); 
 
    position: absolute; 
 
} 
 

 
.side{ 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 141.421px solid rgba(255, 255, 0, 0.5); 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 0; 
 
    transform-origin: 50% 0; 
 
    } 
 

 
.side-1{ 
 
    transform: translateZ(100px) rotateX(-45deg); 
 
} 
 

 
.side-2{ 
 
    border-bottom-color: rgba(0, 255, 255, 0.5); 
 
    transform: rotateZ(90deg) translateZ(100px) rotateX(-45deg); 
 
} 
 

 
.side-3{ 
 
    border-bottom-color: rgba(255, 0, 255, 0.5); 
 
    transform: rotateZ(180deg) translateZ(100px) rotateX(-45deg); 
 
} 
 

 
.side-4{ 
 
    border-bottom-color: rgba(0, 255, 0, 0.5); 
 
    transform: rotateZ(270deg) translateZ(100px) rotateX(-45deg); 
 
} 
 

 
@keyframes spin-pyramid { 
 
    10%{transform: rotateX(90deg);} 
 
    25%{transform: rotateY(90deg) rotateX(90deg);} 
 
    50%{transform: rotateY(180deg) rotateX(90deg);} 
 
    75%{transform: rotateY(270deg) rotateX(90deg);} 
 
    100%{transform: rotateY(360deg) rotateX(90deg);} 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
    <div class="cube"> 
 
    <div class="pyramids"> 
 
     <div class="pyramid pyramid-1"> 
 
     <div class="base"></div> 
 
     <div class="side side-1"></div> 
 
     <div class="side side-2">1.2</div> 
 
     <div class="side side-3">1.3</div> 
 
     <div class="side side-4">1.4</div> 
 
     </div> 
 
     <div class="pyramid pyramid-2"></div> 
 
     <div class="pyramid pyramid-3"></div> 
 
     <div class="pyramid pyramid-4"></div> 
 
     <div class="pyramid pyramid-5"></div> 
 
     <div class="pyramid pyramid-6"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-12-28 B. Ma

einfach die position:absolute Entfernen vom .base und width:0 von .pyramid und fügen display:inline-block.

Dies gibt dem Pyramidenelement (Sie wollen rotieren) eine Höhe und Breite der Basis und somit wird die Rotation relativ zur Basis durchgeführt.

.cube { 
 
    margin: 100px 200px; 
 
} 
 

 
.pyramid { 
 
    position: relative; 
 
    display:inline-block; 
 
    transform-style: preserve-3d; 
 
    animation: spin-pyramid 20s ease infinite alternate; 
 
} 
 

 
.base { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: rgba(255, 0, 0, .5); 
 
} 
 

 
.side { 
 
    height:0; 
 
    width:0; 
 
    border-bottom: 141.421px solid rgba(255, 255, 0, 0.5); 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 0; 
 
    transform-origin: 50% 0; 
 
} 
 

 
.side-1 { 
 
    transform: translateZ(100px) rotateX(-45deg); 
 
} 
 

 
.side-2 { 
 
    border-bottom-color: rgba(0, 255, 255, 0.5); 
 
    transform: rotateZ(90deg) translateZ(100px) rotateX(-45deg); 
 
} 
 

 
.side-3 { 
 
    border-bottom-color: rgba(255, 0, 255, 0.5); 
 
    transform: rotateZ(180deg) translateZ(100px) rotateX(-45deg); 
 
} 
 

 
.side-4 { 
 
    border-bottom-color: rgba(0, 255, 0, 0.5); 
 
    transform: rotateZ(270deg) translateZ(100px) rotateX(-45deg); 
 
} 
 

 
@keyframes spin-pyramid { 
 
    10% { 
 
    transform: rotateX(90deg); 
 
    } 
 
    25% { 
 
    transform: rotateY(90deg) rotateX(90deg); 
 
    } 
 
    50% { 
 
    transform: rotateY(180deg) rotateX(90deg); 
 
    } 
 
    75% { 
 
    transform: rotateY(270deg) rotateX(90deg); 
 
    } 
 
    100% { 
 
    transform: rotateY(360deg) rotateX(90deg); 
 
    } 
 
}

<div class="cube"> 
 
    <div class="pyramids"> 
 
    <div class="pyramid pyramid-1"> 
 
     <div class="base"></div> 
 
     <div class="side side-1"></div> 
 
     <div class="side side-2">1.2</div> 
 
     <div class="side side-3">1.3</div> 
 
     <div class="side side-4">1.4</div> 
 
    </div> 
 
    <div class="pyramid pyramid-2"></div> 
 
    <div class="pyramid pyramid-3"></div> 
 
    <div class="pyramid pyramid-4"></div> 
 
    <div class="pyramid pyramid-5"></div> 
 
    <div class="pyramid pyramid-6"></div> 
 
    </div> 
 
</div>

Quelle

2017-12-28 15:34:33

Um die Y-Achse drehen, ohne die Position zu ändern

Antwort

Verwandte Themen