Ich konnte es kaum erwarten, eine "kostenlose" Zeit zu haben, damit ich meinem Projekt Styling hinzufügen konnte. Etwas über ein bisschen Interaktivität fügt der Seite das Leben hinzu.

Du willst eine schwimmende Katze? Kein Problem. Ich machte ein Bild einer Katze mit KI und extrahierte den Hintergrund in Illustator "von Hand", um einen schönen Ausschnittseffekt für mein .png-Bild zu erzielen. Bam. Katze.

Lass ihn ein bisschen bewegen, also sieht es so aus, als würde er schweben. Eine meiner Lieblings -CSS -Animationen ist Orbit. Es ist wirklich nützlich und Sie können viel damit anfangen.

Katze

In der Ansicht bringe ich das Bild meiner Katze hinein und zuordne es der Klasse "Katze"

Nun erstelle ich in meiner CSS -Datei meinen Stil für "Katze". In Cat nennen wir unsere Animation, Orbit, wie unten gezeigt.

.cat {
  animation: orbit 3s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
} 

Sie sehen hier, dass wir "die Katze in einem Winkel von 0 Grad rotieren", bei 15px vom X-Origin ab, beginnend bei 0 Grad.

Die Katze verlässt einen Kreis auf 360 Grad, bei 15px entfernt, ganz herum. Die zweite Rotation von -360 storniert die erste Rotation, um die Katze aufrecht zu halten. Es ist einfacher, wenn Sie nur die Animation sehen. Xd.

Wir bewegen ihm nur einen winzigen Betrag, da wir nicht wollen, dass er über die Seite fliegt. Gerade genug, um aufregend zu sein.

Ein bisschen links,



Ein bisschen rechts.

Magie!

Würfel

Ich hatte zuvor gelernt, wie man einen Würfel mit CSS erstellt. Während das in Ordnung und Dandy ist, habe ich heute die wilde Haaridee über die Wiederverwendung des Würfels auf dynamische Weise bekommen. Ich wollte die Würfelgesichter in Echtzeit mit Daten bevölkern. Wie sagen die nächsten bevorstehenden Ereignisse. Wie ein Spaß, der auf der Zielseite entdeckt wird. Warum nicht. Das ist aufregend.

Als alles, baue ich das Skelett in der Sicht auf. Unser Würfel braucht schließlich ein Zuhause.

Ich habe einige Optionsschaltflächen, damit der Benutzer mit dem Würfel interagieren kann.

Jeder Optionsknopf zeigt ein anderes Würfelgesicht an.

Ich füge die Informationen hinzu, die ich auf jedem Gesicht in einer Schleife anzeigen möchte:

  







Handling the css is a bit of a dance. Especially with viewports and what not. This is not the answer for mobile but it will work and be functional on a bigger screen, LOL. I'm just gonna leave this here for you. Open to suggestions for handling a small screen size. 













/*===========
rotating cube
==============*/

.cube-container {
  width: 30vw;
  height: 40vh;
  text-align: center;
  perspective: 100em;    
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition-duration: 2s;
  border: 5px solid transparent;  
  margin-top:100px; 
  display: block;
}

.cube-side {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: rgb(64, 0, 148);
  border: 1px solid white;
  background-position: center;
  background-size: cover;
  border: 4px solid lime;
}

.cube-side:nth-child(1){
  transform: rotateY(0deg) translateZ(10em);
}

.cube-side:nth-child(2){
  transform: rotateY(90deg) translateZ(10em);
}

.cube-side:nth-child(3){
  transform: rotateY(180deg) translateZ(10em);
}

.cube-side:nth-child(4){
  transform: rotateY(-90deg) translateZ(10em);
}

.cube-side:nth-child(5){
  transform: rotateX(90deg) translateZ(9.75em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}

.cube-side:nth-child(6){
  transform: rotateX(-90deg) translateZ(9.3em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}


/* cube radio buttons */

.radio-button {
  transform: translateX(-50px);
}

.radio-button:checked ~ .cube{
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.19. 1, 0.22, 1);
}

.radio-button:nth-child(1):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(20deg);
}

.radio-button:nth-child(2):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(180deg);
}

.radio-button:nth-child(3):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(90deg);
}

.radio-button:nth-child(4):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(-90deg);
}

.radio-button:nth-child(5):checked ~ .cube {
  transform: rotateX(-105deg) rotateY(0deg);
}

.radio-button:nth-child(6):checked ~ .cube {
  transform: rotateX(75deg) rotateY(0deg);
}






 Jeder Knopf und jede Seite wird einzeln gehandhabt. Ich würde gerne eine elegantere Lösung sehen, wenn sie existiert. 

 Ich bin einfach sehr aufgeregt, dass es funktioniert hat. 

 Danke fürs Blick!