Ich verwende CSS3, um CSS-Animationen zu erstellen. Ich rotiere ein Bild mit rotateX. Ich möchte die Position des Ursprungs irgendwie markieren, damit ich genau sehen kann, wo der Drehpunkt ist.Wie kann ich die Position von -webkit-transform-origin markieren?
Wie kann ich die Position von -webkit-transform-Herkunft markieren? Ich bin offen für jegliche Lösungen, CSS oder JavaScript.
In der Version von Chrom ich verwende (Version 18), die -webkit-transformation-origin jedes Elements ist immer zunächst der Mittelpunkt des Elements, relativ zu diesem Element, in dem beide Koordinaten platt sind. Also, wenn
element.style.webkitTransformationOrigin
ist ein leerer String, dann wäre es
Math.floor(element.width/2) + "px " + Math.floor(element.height/2) + " px" sein.
Wenn es keine leere Zeichenfolge ist, wird es in diesem Format [x]px [y]px mit einem Leerzeichen zwischen den beiden Koordinaten sein. Sie können die Werte bei Bedarf mit einem regulären Ausdruck extrahieren, wie in Ihrem Fall, und da der Wert relativ zum Element ist, müssen Sie die absolute Position des Elements auf der Seite ermitteln und den Ursprung hinzufügen das, um die absolute Position Ihrer Herkunft zu erhalten.
Platziert diese Lösung tatsächlich einen physischen Marker am Ursprungspunkt, damit ich den Mittelpunkt visuell sehen kann? – zeckdude
Sie haben in Ihrer Antwort einen Tippfehler gemacht, verwenden Sie: element.style.webkitTransformOrigin. Beachten Sie, dass für Chrome (05/14) die Version ohne Präfix (transformOrigin) zwar vorhanden ist, aber nicht definiert ist und keine Auswirkungen hat. – GameAlchemist