Wie erstelle ich eine Kugel in CSS?

7

Ich habe versucht, eine 3D-Kugel mit reinem CSS zu erstellen, aber ich konnte die benötigte Form nicht erzeugen. Ich habe einen Zylinder gesehen, aber ich kann keinen Hinweis darauf finden, eine tatsächliche Kugel zu erstellen.

Mein aktueller Code sieht folgendermaßen aus:

%Vor% %Vor%

jedoch

  • A: Das sind nur 2D-Kreise, keine 3D-Formen
  • B: Ich kann diese nicht in 3d drehen (ich möchte ein drehendes Bild haben), ähnlich wie bei einem Globus.

Tut mir leid, wenn ich etwas verpasst habe, aber ich bin mir nicht sicher, wohin ich gehen soll, um das zu fragen.

    
Emz914 17.06.2015, 12:40
quelle

4 Antworten

6

Die folgende Antwort ist keine tatsächliche 3D-Form . Es gibt nur eine leichte Illusion, 3D zu sein, aber abhängig von Ihrem Anwendungsfall können Sie es möglicherweise "fälschen":

%Vor% %Vor%

Es animiert die background-position des div und durch die Verwendung von Box-Schatten können Sie das Shadowing einer 3D-Form "nachahmen".

    
jbutler483 17.06.2015, 13:05
quelle
7

Sie möchten möglicherweise 3D-gedrehte Kreise verwenden :

Dies verwendet rotierte Kreise, um wie ein sphärisches Gitter zu wirken. die kleinere Nr. von Elementen, die bessere Leistung.

Einige Elemente wurden in der X-Achse und andere in der Y-Achse gedreht. Ich habe verschiedene Farben gefüllt, um dies zu zeigen:

%Vor% %Vor%

Sie können auch einige Elemente in Z-Richtung drehen, aber das macht es noch buggy. Jetzt Wenn Sie die gleichen Farben in Kreise füllen, sieht es fast wie eine Kugel aus :

%Vor% %Vor%
    
Max Payne 19.06.2015 08:46
quelle
6

Ich benutze JavaScript, um die Sphäre zu bauen, die aus vielen div Elementen besteht. Um die Leistung des Browsers zu erhalten, werden die div-Elemente so wenig wie möglich gemacht.

%Vor% %Vor% %Vor%
    
ZulNs 24.12.2015 16:28
quelle
5

Kugelähnliche Form

Es gibt keine tatsächlichen 3D-Formen in html5
Aber du kannst 2D Formen übereinander stapeln.
In diesem Sinne können Sie eine sehr enge Darstellung einer Kugel erstellen.

%Vor% %Vor%
    
Persijn 17.06.2015 13:43
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Eine String-Eigenschaft zu einer UIButton in Swift hinzufügen