css-transforms

___ qstnhdr ___ Wie erstelle ich eine Kugel in CSS? ___ qstntxt ___

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.

    
___ answer30933804 ___

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%
    
___ answer34455508 ___

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%
    
___ answer30892491 ___

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 %code% des div und durch die Verwendung von Box-Schatten können Sie das Shadowing einer 3D-Form "nachahmen".

    
___ tag123html ___ HTML (Hyper Text Markup Language) ist die Standard-Auszeichnungssprache, die zum Strukturieren von Webseiten und zum Formatieren von Inhalt verwendet wird. HTML beschreibt die Struktur einer Website semantisch zusammen mit Hinweisen für die Präsentation, wodurch sie eine Markup-Sprache statt einer Programmiersprache wird. Die neueste Revision der HTML-Spezifikation ist HTML5.2. ___ tag123css ___ CSS (Cascading Style Sheets) ist ein Blatt Sprache zur Beschreibung das Aussehen und die Formatierung von HTML (Hypertext Markup Language), XML (Extensible Markup Language) Dokumenten und SVG-Elemente, einschließlich (aber nicht beschränkt auf) verwendeten Farben Darstellung Stil, Layout, Schriftarten und Animationen. ___ tag123cssshapes ___ CSS-Formen werden mit Cascade Styling Sheets erstellt, um HTML-Elemente in Formen und Bilder zu verwandeln. Die grundlegendsten Formen umfassen Dreiecke, Quadrate und Kreise, können aber zu mehr Vorformen wie Herzen, Oktagonen und Sternen gemacht werden. ___ answer30893434 ___

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%
    
___ tag123shapes ___ Fragen zum Zeichnen oder Definieren von Formen. ___ tag123cstransforms ___ CSS-Transformationen ermöglichen es, mit CSS gestylte Elemente in einen zweidimensionalen oder dreidimensionalen Raum zu transformieren ___
2
Antworten

Warum springt meine Transformation zurück?

Versuche mein Element in Position zu halten (nach dem Übergang). Im Moment ist der übersetzte Ort genau dort, wo ich ihn haben möchte, aber dann springt mein Name zurück auf das Zitat. Fehle ich ein Stück Code oder gibt es einen Code, der das Zu...
02.08.2015, 03:11
2
Antworten

Verwandeln Sie den Ursprung relativ zum Container. Gedrehter Text

Ich brauche Hilfe, um zu verstehen, wie transform-origin funktioniert. Ich habe mein Googling durchgeführt, kann aber nichts finden, was meinem speziellen Anwendungsfall helfen könnte. Hier ist, was ich versuche zu erreichen: Ich habe ein...
10.02.2015, 15:48
2
Antworten

CSS-Transformation Skew ohne Unschärfe

Ich versuche, einige Treiber mit einem Rahmen und Text zu erstellen. Die Treiber müssen gekippt werden, so dass ich die transform: skew(); CSS-Regel angewendet habe. Jetzt sind die Schrift und die Grenze jedoch sehr verschwommen. Ich verstehe...
19.02.2018, 21:11
2
Antworten

Chrome-Position: behoben und transformZ-Fehler

Sehen Sie sich diese Demo in FF und an Chrome und entfernen Sie dann: -webkit-transform:translateZ(0px); Fom css, und sehen Sie sich noch einmal Chrome an. Es macht auch Chrome body-container mit min-width:100% , Inhalt...
04.10.2012, 16:47
2
Antworten

3D Umkreise auf der X-Achse

Ich versuche eine CSS-Animation zu erstellen, bei der es so aussieht, als würde sich ein div um ein Bild (oder ein anderes div) auf der X-Achse drehen. Ich konnte eine ungefähre Vorstellung davon machen: Ссылка , aber das animierte Div hat nic...
20.06.2016, 18:58
3
Antworten

CSS3 Animation, in Position übersetzen

Ich habe ein div, auf das ich klicke, um es zu ziehen. Sobald es auf einem Gebiet ist, animiert es zu seiner Position über: %Vor% Ich kann es auch animieren mit: %Vor% Der Unterschied ist; mit jQuery animiert es auf 200px von der linken...
14.06.2012, 01:05
2
Antworten

Einen Brief horizontal mit CSS spiegeln

Ich kann einzelne Buchstaben mit transform: rotate (); aber nicht wie man horizontal reflektiert. Weißt du, wie ich horizontal reflektieren kann? Ich möchte es mit dem Selektor .logo: first-letter {} für mein Logo verwenden. %Vor% BE...
18.08.2013, 13:50
1
Antwort

Position fixed funktioniert nicht mit CSS-Eigenschaft transform

Gibt es eine Möglichkeit, das "Hallo" -Element zu fixieren? Wenn ein Benutzer nach oben oder unten scrollt, bewegt sich das Element hallo nicht von seiner Position. Hier ist das Beispiel: Ссылка Hier ist das CSS: %Vor% Hier ist der C...
09.04.2014, 16:00
1
Antwort

Stellen Sie die css-Drehung ein, um ein Element auf einen Punkt zu richten

Ich versuche ein div zu einem Punkt zu drehen, indem ich css 3 transform rotiere. Ich bin zu diesem Punkt gekommen: jsfiddle link %Vor% Ich habe die "Lookat" -Funktion gegoogelt und nur etwas wie eine Lookat-Matrix gefunden.     
25.09.2014, 08:39
2
Antworten

CSS3 Rotationsübergang, der zu einer intermittierenden Mausklick-Erkennung führt

Dies ist ein sehr ähnliches Problem zu CSS3 Bei animiertem Element drehen, wodurch das Klickereignis nicht aufgerufen wird Obwohl mein Problem etwas anders ist, kann ich dazu keine zusätzlichen Informationen hinzufügen. Beachte meine San...
06.03.2013, 22:50