← Zurück zur Startseite
📖 CSS 3D · ohne Bibliothek

Portfolio-Buch
zum Umblättern

Ein aufgeschlagenes Buch, dessen Seiten sich in 3D umblättern lassen. Gebaut mit HTML, CSS und rund 50 Zeilen JavaScript, ohne Bibliothek. Unter dem Beispiel steht der vollständige Quelltext zum Kopieren.

Shaw Taylor

KI-Integration & Automatisierung

Softwareentwickler aus Bad Oeynhausen. 29 Jahre Erfahrung in der professionellen Softwareentwicklung.

Schwerpunkte

  • KI-Integration

    Large Language Models in bestehende Unternehmenssysteme einbinden, von der Datenbank bis zum fertigen Ablauf.

  • Automatisierung

    n8n-Workflows für wiederkehrende Datenübertragungen, Auswertungen und Arbeitsschritte.

  • MCP-Schnittstellen

    Datenbanken, Dateisysteme und APIs sicher für KI-Systeme erreichbar machen.

1

Technik

Programmierung

  • C#
  • Delphi
  • Python

KI & Agenten

  • Claude AI
  • MCP Server
  • RAG

Automatisierung

  • n8n
  • Datenbanken
  • APIs
2

Leistungen

KI Agent

Fragen in Alltagssprache, Antworten aus den eigenen Daten.

Ansehen

MCP

Schnittstellen zwischen KI und Unternehmensdaten.

Ansehen

n8n

Abläufe verbinden und automatisch laufen lassen.

Ansehen

Data Warehouse

Auswertungen zu Umsatz, Marken und Kunden.

Ansehen
3

Ratgeber

4

Projekt

Kunden Data Warehouse Showcase

Ein Data Warehouse im Browser: Auswertungen zu Umsatz, Marken, Warengruppen, Kunden und Lieferanten, mit Demodaten zum Ausprobieren.

5

Kontakt

Fragen zu KI-Integration, Automatisierung oder Schnittstellen? Schreiben Sie mir.

6

Das Buch blättert von selbst und hält an, solange der Mauszeiger darauf liegt. Nach dem ersten Klick blättern Sie selbst: mit den Pfeilen unten in den Seitenecken oder mit den Pfeiltasten. Auf schmalen Bildschirmen liegen die Seiten untereinander.

Der Quelltext

Der Quelltext wird mit JavaScript aus dieser Seite gelesen.

Die Anzeige liest den Code direkt aus dieser Seite. Was hier steht, läuft oben. Zum Nachbauen: HTML in den body, CSS in ein style-Element, JavaScript ans Ende der Seite.

So funktioniert es

Perspektive

perspective am Buch erzeugt die Tiefe. Jedes Blatt dreht sich mit rotateY(-180deg) um seine linke Kante, festgelegt über transform-origin: left.

Zwei Seiten je Blatt

Vorder- und Rückseite liegen deckungsgleich übereinander. Die Rückseite ist von Anfang an um 180 Grad gedreht, backface-visibility: hidden blendet die abgewandte Seite aus.

Stapelreihenfolge

Rechts muss das erste Blatt oben liegen, links das letzte. Das Skript tauscht den z-index in der Mitte der Drehung, wenn das Blatt hochkant steht.

Mitwachsende Größe

Schrift und Abstände hängen über die Container-Einheit cqw an der Buchbreite. So bleibt das Seitenbild in jeder Größe gleich.