Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[jogibear9988]

Hallo, dachte ich frage mal hier. Kennt sich jemand mit CSS 3d Transformationen und deren mathematik aus?
Ich versuche die 4 eckpunkte eines 3D transformierten objekts im raum zu berechnen, mit 3D transformationen schlägts aber fehl. Wenn sich jemand damit auskennt kann ich mein problem gern näher erläutern.

Benutzen tu ich das ganze für overlays von elementen in meiner WebUI, von daher schon eine Visualisierungs Thema ;-)

[OliverIO]

@jogibear9988

hab da auch keine detailkenntnisse.
aber evtl findest du in den eigentlichen spezifikationen etwas mehr mathematische grundlage zum nachvollziehen

https://drafts.csswg.org/css-transforms-2/#funcdef-translate3d
https://drafts.csswg.org/css-transforms-2/#Translate3dDefined

den link zu den spezifikationen findet man immer bei mdn unter specifications
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

nicht wundern über den link. auch wenn das da draft heißt, wurde der bereits in allen browsern so implementiert

[jogibear9988]

Kenn ich leider alle schon ;-)
ich arbeite an einem polyfill für die getBoxQuads API (https://github.com/jogibear9988/getBoxQuadsPolyfill)

Der funktioniert auch gut für die 2D Transformationen. Bei 3D mit einer Perspektive bekomme ich aber nun eben Punkte mit einem Z-Anteil, und ich weiß nicht wie ich die zurückrechnen kann. Ich finde schon Formeln mit denen man mit dem Kehrwert Perspektive den Z-Anteil multipliziert, jedoch können es ja verschachtelte perspektivenwerte in der kombinierten Transformationsmatrix sein...

Firefox hat die API schon, da funktionierts...
Beispielseite: https://jogibear9988.github.io/getBoxQuadsPolyfill/

[OliverIO]

@jogibear9988 sagte in Fragen zu HTML 3D Transformationen und Mathe:

getBoxQuads

den source von firefox hast du schon angeschaut, denke ich?
https://searchfox.org/mozilla-central/source/layout/base/GeometryUtils.cpp
wie gesagt, hab da nur ganz wenig kenntnisse.
3dtranslate macht ja nur den transform im 3d-raum.
das ergebnis muss dann noch auf den 2d bildschirm in pixel umgerechnet werden.
aber welcher teil der api da was macht, keine ahnung, das 3d nach 2d muss es ja schon geben.

[jogibear9988]

@oliverio said in Fragen zu HTML 3D Transformationen und Mathe:

den source von firefox hast du schon angeschaut, denke ich?

schon, problem ist, das geht über zig files... da steigt man nicht so leicht durch.

Den Code dafür hat ja jeder browser, da die devtools das ja können (das overlay genau so zeichnen).
Nur finde dich mal erst in den Browser sourcen zurecht.

[OliverIO]

@jogibear9988

ungefähr so wie, finde dich in vis sourcen zurecht? :)

[jogibear9988]

@oliverio said in Fragen zu HTML 3D Transformationen und Mathe:

@jogibear9988

ungefähr so wie, finde dich in vis sourcen zurecht? :)

nie probiert... hab ja meine eigene.