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 ___
3
Antworten

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

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 ni...
18.12.2014, 11:22
1
Antwort

Wie kann ich mein jQuery .animate () - Element zoom / pan mit CSS-Transformation neu erstellen?

Ich habe ein jsFiddle zusammengestellt, um meine Frage zu illustrieren: Ссылка Ich habe eine Funktion, die auf ein bestimmtes Element schwenkt und zoomen kann. Dies wird verwendet, um den Übergang zwischen Bildern in einem Comic zu erste...
11.06.2012, 15:14
1
Antwort

Direkte lineare Transformation in CSS

Ist es möglich, einen DLT in CSS zu machen? Wenn ja, wie wird dies erreicht? Ich kann mir keinen Weg vorstellen mit transform: matrix ... Wenn das nicht möglich ist, was wäre ein alternativer Ansatz? Der besondere Effekt, den ich erreichen...
15.11.2012, 21:45
2
Antworten

css-Transformation funktioniert nicht für css-generierten Inhalt für :: after, :: before-Elemente

Ссылка %Vor% Laut dieser Seite wurde es in Chrome 23 behoben ... aber ich habe Chrome 28 und es funktioniert nicht. Ссылка Ссылка     
17.08.2013, 00:56
3
Antworten

translateY / X verursacht Bildlaufleisten in Firefox

Bei Verwendung von translateX oder translateY scheint das Layout der Seite in Firefox betroffen zu sein. Persistente Bildlaufleisten werden generiert, obwohl die CSS-Spezifikation angibt, dass diese Eigenschaften das Layout nicht beeinflus...
14.10.2011, 14:54
3
Antworten

Verhindern Sie, dass Kinder die Transformation in CSS rotieren

Ich führe eine CSS-Transformation durch: rotiere auf einem Elternteil, möchte diesen Effekt jedoch bei einigen der Kinder negieren können - ist es möglich, ohne die umgekehrte Rotation zu verwenden? Die umgekehrte Rotation funktioniert zwar,...
01.03.2012, 09:25
2
Antworten

CSS3 transform Text drehen, feste Position links und rechts, vertikal zentriert

Ich versuche ein Element links und rechts vom Browserfenster zu positionieren, beide enthalten ein ul mit CSS-Transformation rotieren. Ich habe es geschafft, .rotate-left und seine ul nach links zu positionieren, aber ich konnte das ul...
09.03.2013, 01:16
1
Antwort

Browserübergreifende CSS3-Keyframe-Animation Firefox

Ich habe einen einfachen "pulsierenden" Effekt auf den Play-Button (welcher ein Anker-Tag ist), mit CSS3 und Keyframes. Obwohl es in Chrome und Safari einwandfrei funktioniert, scheint es in Firefox nicht zu funktionieren. Hat jemand eine Ide...
16.12.2013, 17:59
1
Antwort

Wird die 2D-Transformation in Mobile Safari beschleunigt?

Mir wurde oft gesagt, dass CSS-3D-Transformationen in Mobile Safari hardwarebeschleunigt sind, was mich fragen lässt, ob die Implikation ist, dass 2D-Transformationen nicht sind? Ich kann mir keinen Grund vorstellen, warum sie das nicht wären, d...
22.03.2012, 14:57
2
Antworten

Drehen Sie ein SVG-Hamburger-Symbol in ein X?

Ich habe ein 3-bar-Icon mit reinem SVG -Code in HTML entworfen. Ich benutze CSS3-Transformationen, um den oberen & amp; untere Balken in eine X-Form. Das Problem ist, dass sie sich um ihr eigenes Zentrum drehen, aber ich muss sie um das Zentru...
19.06.2015, 15:23