Auswirkung der Ansicht von unten auf einen Text mit CSS

8

Ob es möglich ist, 3D-Text zu neigen, zu drehen, zu verkleinern? Ich möchte einen Effekt der Ansicht von unten auf meinen Text erstellen (oder wenn Text auf einer Tabelle liegt), indem ich nur CSS verwende. Ist es möglich? Ich meine nicht die Animation, nur statische Wirkung. Ich kann es in 3dsMAX oder PhotoShop tun, aber ich möchte wissen, wie es in CSS implementiert werden kann.

Ich habe:

Geige

Ich möchte:

Ich habe ein bisschen diesen Effekt (wegen des großen Schattens). Aber ich möchte es klarer und deutlicher machen. Ein weiterer Anstieg des Farbtons verstärkt den Effekt nicht. Ich muss meinen Text vertikal kippen und komprimieren . Welche Stile können mir dabei helfen?

Ich wäre dankbar für irgendwelche Ideen!

Meine Schattenstile:

%Vor%

}

    
François Esthète 12.03.2014, 14:58
quelle

3 Antworten

2

das ist nicht einfach, ich denke, Sie brauchen js dafür, leider css text-shadow Eigenschaft ist nur Zweidimensional. Hier ein kurzes Beispiel: Verwenden Sie Ihre Tastatur, um den Winkel zu steuern

0- REAL 3D NUR CSS Cross Browser-Kompatibilitätslösung (prefixfree)

Für Cross-Browser-Gradienten (NO -webkit-,-moz-,-ms-)

Speichern Sie Ihre Zeit mit LeaVerou / prefixfree

Sie finden hier eine CDN-Version

3D-DEMO mit prefixfree & amp; Nur CSS

%Vor%

1- REAL 3D BENUTZEN VON JQUERY Cross-Browser-Kompatibilitätslösung (prefixfree)

3D-DEMO mit Jquery

MARKIERUNG

%Vor%

JS

%Vor%

CSS

%Vor%

Sie können jetzt die Position auswählen, indem Sie den Wert von rotateZ(Value deg) rotateX(Value deg) rotateY(Value deg) ändern, um die perfekte Position zu erhalten.

%Vor%

tiefes Verständnis css3D

Lesen Sie , wie das Verschachteln von 3D-transformierten Elementen funktioniert

und nicht verpassen [CSSconf.eu 2013] Ana-Maria Tudor: Mathe-gestützte Transformationen zum Erstellen von 3D-Formen

Wenn Sie mehr brauchen, lesen Sie

1- css-3d-animation-how

2- Ana-Maria Tudor auf stackoverflow

2- REAL 3D

3D-DEMO mit Animation

%Vor%

Sie können den Bereich entfernen, wenn Sie die Animation am Anfang nicht mögen

%Vor%

3- ALLGEMEIN

3D-DEMO mit Animation

oder ändern Sie den Winkel wie folgt

%Vor%

3D-DEMO ohne Animation

%Vor%

4- NUR CSS verwenden

Das Maximum, das Sie nur mit Text-Shadow erreichen können, ist so etwas wie

%Vor%

3D-DEMO nur mit Text-Shadow

kannst du es dann so anpassen, wie du willst!

    
Gildas.Tambo 13.03.2014, 09:36
quelle
1

Ich denke das ist das, worauf Sie sich beziehen (Fiddle ). Der Transformations-Selektor wird in dieser Situation dein Freund sein, also transform: rotate(6.5deg) rotateX(188deg) skewX(-25deg) .

HTML:

%Vor%

CSS:

%Vor%     
eclipsis 12.03.2014 15:07
quelle
1

Sie können ein ungefähres Ergebnis erhalten, indem Sie eine Drehung mit Perspektive einstellen:

%Vor%

Geige

Ich setze die Anzeige auf Inline-Block, so dass die Perspektive zentriert ist, sonst ist sie schief.

    
vals 12.03.2014 16:50
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Bower Wird devDependencies in Production geladen?