css3 Transform-Origin-Problem im 3D-Würfel

9

Ich habe css-cube erstellt und rotiert auf :hover .

Aber seine Rotation basiert auf einer Seite des Würfels!

Ich möchte es von seiner Mitte aus drehen, wie in diesem Beispiel . Ich habe transform-origin -Eigenschaft versucht, aber nicht das gewünschte Ergebnis bekommen .

Ich habe auch versucht, eine mittlere Ebene innerhalb des Würfels zu platzieren, aber der Schwebeflug funktioniert in dieser Situation nicht!

%Vor% %Vor%
    
Suresh 18.12.2014, 11:22
quelle

3 Antworten

3

Das Problem besteht darin, dass Sie den Transformationsursprung in der Mitte des Würfels festlegen müssen und der Würfel ein 3D-Element ist. Sie vermissen die 3. Dimension!

Es sollte also

sein %Vor%

da Ihre Cube-Seite 100px ist

%Vor% %Vor%
    
vals 26.12.2014, 08:56
quelle
1

Ich habe ein translateZ hinzugefügt, um die Rotationsachse zu verschieben, es sieht etwas zentrierter aus, aber immer noch nicht wie Desandros ex.,

Ich lese die Dokumentation und denke, Sie sollten dies! es ein wenig über orgins erklären und Perspektiven ...

EDIT1: integriertes translateZ anstelle von transform Herkunft (jetzt ist es perfekt !!)

%Vor% %Vor%

BTW CSS-Transformationen rocken !!

    
maioman 18.12.2014 12:26
quelle
0

Ich habe versucht, "translateZ (-70px)" in ".main: hover" hinzuzufügen und ich denke, es dreht sich zentriert.

Wenn sich der Würfel dreht, werden einige Pixel nach links verschoben und der Eindruck entsteht, dass er zentriert ist.

    
psyv 18.12.2014 12:53
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Eine ausführlichere Erklärung von procstats für Android