TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich ein CSS Rotating Cube Widget?

3

CSS ist ein Biest, gerade in einer Lernphase macht es Spaß, verschiedene Eigenschaften zu üben. CSS-Webkit-Animationseigenschaften sind interessant, um attraktive Animationen für Ihre Website zu erstellen. In diesem Artikel erstellen wir ein einfaches CSS-Widget mit rotierenden Würfeln unter Verwendung von Keyframes.

Verwandte: HTML-Tutorial für Anfänger.

Was ist rotierender Würfel?

Der rotierende Würfel sieht wie folgt aus.

Sie können Text oder Bilder auf sechs Seiten des Würfels präsentieren und die Rotationsgeschwindigkeit steuern, damit die Betrachter während der Rotation verstehen. Sie können beispielsweise Ihre Produktbilder verwenden, um sie auf der Shop-Seite zu präsentieren, wobei jedes Bild mit der entsprechenden Produktseite verlinkt ist.

Komponenten des Widgets

Das Widget besteht aus zwei Komponenten – CSS und HTML. Es wird empfohlen, den CSS-Teil im Header-Bereich der Webseite und den HTML-Teil im Body zu platzieren.

1 CSS für das Widget

Unten ist das CSS für das rotierende Würfel-Widget. Wir definieren zuerst eine Box, fügen sechs Seiten hinzu und drehen die Box mit der Webkit-Keyframe-Animation.

<style type="text/css"> #box div { position: absolute; height: 250px; width: 250px; border: 1px solid lightgrey; background: rgba(255,200,100,0.8); text-align: center; font-size: 200px; } #box { -webkit-animation-name: animation; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; margin:80; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 125px 125px 0; } #box .one { -webkit-transform: translateZ(125px); } #box .two { -webkit-transform: rotateX(-90deg) translateZ(125px); } #box .three { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px); } #box .four { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px); } #box .five { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px); } #box .six { -webkit-transform: rotateY(90deg) translateZ(125px); } @-webkit-keyframes animation { from,to{} 16% { -webkit-transform: rotateY(-90deg);} 33% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);} 50% { -webkit-transform: rotateY(225deg) rotateZ(135deg);} 66% { -webkit-transform: rotateY(135deg) rotateX(135deg);} 83% { -webkit-transform: rotateX(135deg);} } </style>

2 HTML für das Widget

Unten ist der HTML-Code des Widgets, Sie müssen die Bilder durch Ihre eigenen Bild-URLs ersetzen.

<div id="view" style="width:350px; height:250px; margin:80px auto 0 auto;"> <div id="box"> <div class="one"><img src="https://img.webnots.com/2016/09/A-One.png"></div> <div class="two"><img src="https://img.webnots.com/2016/09/B-Two.png"></div> <div class="three"><img src="https://img.webnots.com/2016/09/C-Three.png"></div> <div class="four"><img src="https://img.webnots.com/2016/09/D-Four.png"></div> <div class="five"><img src="https://img.webnots.com/2016/09/E-Five.png"></div> <div class="six"><img src="https://img.webnots.com/2016/09/F-Six.png"></div> </div> </div>

Anpassen des Widgets

Sie können das Widget nach Ihren Bedürfnissen anpassen. Nachfolgend finden Sie einige Optionen:

  • Die Boxgröße wird mit 250x250px verwendet und das translateZ wird mit der halben Breite als 125px verwendet. Wenn Sie die Boxgröße ändern möchten, stellen Sie sicher, dass Sie diese beiden Parameter entsprechend ändern.
  • Stellen Sie sicher, dass Sie die Bilder mit den gleichen Abmessungen wie die Box verwenden. In diesem Beispiel haben wir 250 x 250 Pixel große Bilder auf allen Seiten der Box verwendet. Sie können auch einen beliebigen Text anstelle von Bildern oder Text- / Bildkombinationen auf verschiedenen Gesichtern verwenden.
  • Die Rotationsgeschwindigkeit wird in CSS als "-webkit-animation-duration: 6s;" als 6 Sekunden definiert. Sie können die Rotationsgeschwindigkeit je nach Bedarf erhöhen oder verringern.
  • Verwenden Sie die Prozentwerte der Keyframe-Animation, um die Transformationsgeschwindigkeit zu ändern.
  • Die Position der Box wird im HTML-Code im Inline-Stil als 350px Breite, 250px Höhe und 180px Rand definiert. Sie können diese Werte anpassen, um den Cube richtig auf Ihrer Webseite zu positionieren.

Aufnahmequelle: webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen