Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

3D-Modelle mit CSS: Dieser Online-Editor bietet euch den perfekten Einstieg

Tridiv stellt euch einen X-Wing zur Verfügung. (Screenshot: Tridiv)

CSS kann mehr als nur div-Elemente gestalten. Es können auch komplizierte 3D-Modelle mit CSS umgesetzt werden, bis jetzt aber nur mühevoll. Mit Tridiv könnt ihr komplexe 3D-Animationen innerhalb einer einfachen GUI erstellen.

Spätestens nach translate3d und der Hardware-Beschleunigung von CSS sind 3D-Animationen mit CSS salonfähig geworden. Leider sieht man solche 3D-Effekte relativ selten – die recht schwere Umschreibung von 3D-Objekten sowie ihre Ani- und Transistionen mithilfe von CSS sind hier nicht gerade förderlich gewesen.

Tridiv: Ich habe einen 3D-Pfeil gemacht!

tridiv-2
3D-Modelle mit CSS: Die Editor-Ansicht in Tridiv sowie mein Pfeil in der dritten Dimension. (Screenshot: Tridiv)

Mit Tridiv gibt es jetzt eine Möglichkeit, die euch das Erstellen dreidimensionaler Objekte erleichtern soll. Der einfach zu bedienende Online-Editor stellt euch die geometrischen Figuren Würfel, Zylinder, Pyramide sowie ein generisches Prisma zur Verfügung, die nach Belieben editiert werden können. So sieht zum Beispiel ein dreidimensionaler Pfeil in CSS aus:

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ #tridiv {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 62.5%;
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="prism"] .ft, [class*="prism"] .bk {
  width: 100%;
  height: 100%;
}
[class*="prism"] .bk {
  left: 100%;
}
[class*="prism"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="prism"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="prism"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="prism"] .lt {
  left: 100%;
}
[class*="prism"] .bm {
  top: 100%;
}
[class*="prism"] .rt .face {
  left: -100%;
  transform-origin: 100% 0;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
/* .arrow-top styles */
.arrow-top {
  transform:translate3D(5.6875em, -4.4375em, 0em) rotateX(-90deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:3.125em;
  height:11.75em;
  margin:-5.875em 0 0 -1.5625em;
}
.arrow-top .rt .face {
  transform:rotateZ(-44.38394009160078deg);
}
.arrow-top .lt .face {
  transform:rotateZ(44.38394009160078deg);
}
.arrow-top .ft {
  height:16.441183047457383em;
  transform:translateZ(-5.75em) rotateX(44.38394009160078deg);
}
.arrow-top .bk {
  transform:translateZ(-5.75em) rotateY(180deg);
}
.arrow-top .rt, .arrow-top .lt {
  width:11.5em;
  height:11.75em;
}
.arrow-top .rt .face, .arrow-top .lt .face {
  height:16.441183047457383em;
}
.arrow-top .bm {
  width:3.125em;
  height:11.5em;
}
.arrow-top .face {
  background-color:#0000ff;
}
/* .arrow-body styles */
.arrow-body {
  transform:translate3D(-1.125em, 1.875em, 0.0625em) rotateX(0.1deg) rotateY(-0.1deg) rotateZ(224.2deg);
  opacity:1;
  width:4em;
  height:18.49726108460395em;
  margin:-9.248630542301974em 0 0 -2em;
}
.arrow-body .ft {
  transform:translateZ(0.6875em);
}
.arrow-body .bk {
  transform:translateZ(-0.6875em) rotateY(180deg);
}
.arrow-body .rt, .arrow-body .lt {
  width:1.375em;
  height:18.49726108460395em;
}
.arrow-body .tp, .arrow-body .bm {
  width:4em;
  height:1.375em;
}
.arrow-body .face {
  background-color:#0000ff;
}
.arrow-body .ft {
  width:2.625em;
  margin-left:0.6875em;
}
.arrow-body .bk {
  width:2.625em;
  margin-left:-0.6875em;
}
.arrow-body .rt, .arrow-body .lt {
  width:0em;
}
.arrow-body .tp, .arrow-body .bm, .arrow-body .tp .photon-shader, .arrow-body .bm .photon-shader {
  border-radius:0.6875em;
}
.arrow-body .cr {
  width:0.6875em;
  left:0.34375em;
}
.arrow-body .cr-0 {
  transform: translate3D(2.625em, 0, 0em);
}
.arrow-body .cr-1 {
  transform: translate3D(2.625em, 0, 0em);
}
.arrow-body .cr-2 {
  transform: translate3D(0, 0, 0em);
}
.arrow-body .cr-3 {
  transform: translate3D(0, 0, 0em);
}
.arrow-body .cr-0 .s0 {
  transform: rotateY(15deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-0 .s1 {
  transform: rotateY(45deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-0 .s2 {
  transform: rotateY(75deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-1 .s0 {
  transform: rotateY(105deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-1 .s1 {
  transform: rotateY(135deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-1 .s2 {
  transform: rotateY(165deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-2 .s0 {
  transform: rotateY(195deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-2 .s1 {
  transform: rotateY(225deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-2 .s2 {
  transform: rotateY(255deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-3 .s0 {
  transform: rotateY(285deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-3 .s1 {
  transform: rotateY(315deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .cr-3 .s2 {
  transform: rotateY(345deg) translate3D(-50%, 0, 0.6625em);
}
.arrow-body .side {
  width:0.3934301395927937em;
}
Anzeige

3D-Modelle mit CSS: Export zu CodePen

Das Interface lässt sich zwischen Preview- und Editor-Modus hin- und herschalten. Für eine bessere Ansicht sorgen dynamische und statische Lichteffekte. Die einzelnen geometrischen Figuren können direkt im Editor angepasst werden. So könnt ihr eure Oberflächen einfach in Farben erstrahlen oder aber mit einer Textur verschönern lassen.

Darüber hinaus könnt ihr durchweg umfangreiche Modelle erstellen – Tridiv hat für euch Modelle eines iPhones, eines X-Wings sowie ein NES vorbereitet, die ihr alle editieren könnt.

tridiv
Mit drei umfangreichen Modellen bietet euch Tridiv den perfekten Einstieg. (Screenshot: Tridiv)

Tridiv bietet einen Export zu CodePen, und wem das nicht reicht, der kann seine Modelle direkt via Iframe einbinden – oder eine Short-URL zum Modell generieren lassen.

Ihr findet den Online-Editor von Tridiv auf der offiziellen Seite. Derzeit wird Tridiv von den Browsern Chrome, Safari und Opera unterstützt.

Welche 3D-Modelle könnt ihr machen?

Finde einen Job, den du liebst

Eine Reaktion
Daniel Weiß

Richtig geil! Habe mich damit auch ein bisschen gespielt, läuft auch extrem performant.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot