CSS Buchstaben um 90° drehen

  • Ich habe ein ganz tolles horizontales "Accordeon" gefunden. In dem hat es "Tabs" auf denen ein Text steht. der steht aber vertikal auf dem Tab __I statt L ) Ich brauche aber keinen Text in jedem Tab, sondern nur einen Buchstaben und der muss ganz normal horizontal stehen. Kann man Buchstaben irgendwie in CSS drehen?


    Danke,

    brainstuff

  • m.scatello das habe ich auch schon probiert ... das wird in dem script schon verwendet, aber das dreht nicht die Buchstaben sondern die Box in der die stehen. Das ist ein Effekt, wie so eine Bahnschranke ... : | / ___ Wenn die "Schranke" zu ist müsste der Text normal sein: p______ und wenn die "Schranke" offen ist genauso. nicht offen so: __ und geschlossen so |> sondern in beiden Zuständen so A dies obwohl die "Schranke" (=die Textbox) zuklappt.


    Ich will dieses "Accordeon" fÜr einen ganz ungewöhnlichen Effekt benützen. Denn gewünschten Effekt könnte ich alternativ auch mit einer anderen Methode erreichen (ohne diese Textbox): indem ich die Buchstaben ganz rechts oben auf die Bilder stelle, aber die Bilder werden im zugeklappten Zustand in der Mitte angezeigt. Ich will das hier im Ausgangszustand haben

    |.... 1|2|3|4|5| bzw. |1|2|3|4|5|


    Wenn ich die Buchstaben in die rechte obere Ecke der Bilder setze, werden die im geschlossenen Zustand des Accordeons nicht sichtbar. Das wird dann so: | 1 | | | | | bzw so | | | | | | weil die Bilder, im geschlossenen Zustand, ja nur in der Mitte angezeigt werden.


    Ich habe probeweise im Script alles was center heisst in right umgewandelt, aber das ändert nichts an der Anzeige der Bilder ... die werden immer in der Mitte angezeigt.


    Die Idee die dahinter steckt, ist dass ich da im zugeklappten Zustand eine Art von Logo anzeige: /1/2/3/4/5/ wenn man dann auf eine Falte des Accordeons klickt, kommt eine Beschreibung dafür, was der Buchstabe bedeutet ... also im Style ... 1 ist null plus eins 2 ist null plus 2 oder / v / w / .......... /v/: bedeutet "verdorbene" /w/: bedeutet "Windmühle".

    Wenn die einzelnen Buchstaben des Logos jeweils in der rechten oberen Ecke der Bilder stehen würden, dann würde das Logo, im geschlossenem Zustand des Accordeons, ganz normal angezeigt werden.


    Danke

    brainstuff

  • Dieto. Ohne Quellcode kann man dir da nicht helfen. Du redest von 90 Grad drehen und das macht man normalerweise mit transform und rotate.

    Es gibt noch nee möglichkeit von oben nach unten zu schreiben und so weiter , doch ohne Quellcode wird das hier wahrscheinlich nicht mehr viel bringen

  • Hi Basti1012,


    ich nehme an dass dieser Code die "Schranke" Betätigt ...


    .container .card .card__head {

    color: black;

    background: red; /* rgba(255, 30, 173, 0.75);*/

    padding: 0.5em;

    transform: rotate(-90deg); /*-90deg */

    transform-origin: 0% 0%;

    transition: all 0.5s ease-in-out;

    min-width: 100%;

    text-align: left;

    position: absolute;

    bottom: 0;

    left: 0;

    font-size: 1em;

    white-space: nowrap;

    }


    mit dem "transform: rotate(-90deg);" wird der Text bzw die Text-Box, im Ausgangszustand vertikal geschrieben. Wenn man dann auf die Accordeon-Falte klickt klappt die Text Box in die horizontale.


    Den kompletten Code findest Du auf https://codepen.io/bbx/pen/Jxoqdg.


    Da siehst Du auch, wie dieses Accordeon funktionniert ... ich will, dass der erste Buchstabe, der in den "Schranken" steht, immer horizontal angezeigt wird ... es braucht für mein Projekt nur einen Buchstaben pro "Schranke".


    Ideal wäre es sogar, wenn ich statt dem Buchstaben, ein Bild von einem Buchstaben nehmen könnte ..... das Logo von dem Projekt besteht aus 5 Buchstaben, die jeweils, wie ein Icon, eine Funktion des Projektes symbolisieren. In der "Falte" des accordeons wird dann erklärt für was das Symbol steht.


    Danke


    mfg

    brainstuff

  • bei den ersten accordeon steht ja

    Plotting Cat

    Da willst du jetzt nur das P drehen ?

    oder das t weil es oben steht ?

    Eigentlich sollte man die ganze schrift nach links drehen und dann das P drehen , was für mich dann etwas mehr sinn ergebe.

    Wie willst du es den haben ?


    Ohne jetzt was versucht zu haben wäre mein erster gedanke das P so zu drehen

    Code
    <div class="card__head"><span class="dreh">P</span>lotting Cat</div>
    <style>
    .dreh {
      transform: rotate(90deg);
    }
    </style>

    Doch ist nicht getestet weil ich noch nicht weiß was du wirklich brauchst. Aber versuch das doch mal in der art

  • basti1012,


    in dem template was ich da gefunden habe verwendet der Autor Katzen-Bilder ... eines davon nennt er "plotting cat" ... der Name wird dann auf einer "Schranke" angezeigt, im geschlossenen Zustand (da ist die Schranke offen) ist derText vertikal (-90) angeordnet. Wenn man dann die Falte öffnet, klappt die "Schranke" herunter und das plotting cat ist horizontal zu lesen.


    Bei meiner Anwendung steht nur ein Buchstabe pro "Falte" und der muss immer (egal ob die Schranke zu oder offen ist) horizontal stehen ... Ich habe ein geniales System erfunden, was den Email SPAM total abstellen kann. Dafür habe ich ein Logo entworfen, was aus 5 Buchstaben besteht, die man als Iconen betrachten kann: jeder Buchstabe steht für eine Funktion von dem Verfahren. Zudem kann man das Logo um 180° drehen ... und dann ist es genauso wie anderstherum gedreht, wie dieses Beispiel: "psd" wird, wenn man es um 180° dreht, zu "psd". (das Logo was ich da erklären will funktionniert genauso aber es hat 5 Buchstaben)


    Ich will dass das Logo, wenn das Accordeon "zu" ist, normal angezeigt wird. ... psd. Jeder Buchstabe steht auf einer "Falte": /p/s/d/. Wenn ma dann die Falte P öffnet, wird erklärt, was diese "Icone" bedeutet ... p bedeutet "Provenance" also "Herkunft" (=Absender) .... d bedeutet "destination" (=Empfänger) die anderen 3 Buchstaben stehen für die Prüfmethoden, die den SPAM auf dem Weg zum Empfänger heraussortieren.


    Bill Gates hat 2004 versprochen, dass Microsoft den Email Spam abstellt .. statt dessen hat sich der SPAM inzwischen verzehnfacht. Mein Verfahren ist das einzige Verfahren, was zuverlässig dafür sorgt, dass ALLE nötigen Nachrichten zuverlässig ankommen und dass man sie nicht im SPAM-Ordner suchen muss. Da SPAM unserer Wirtschaft und Gesellschaft weltwert einen riesigen Schaden zufügt, ist inzwischen sogar die UNESCO dabei mein Projekt zu unterstützen. Ich habe es da mit sehr vielen Leuten zu tun, die von Informatik keine Ahnung haben und die trotzdem sehen können müssen, dass das Verfahren extrem "sauber" ist. Desshalb suche ich nach einer Möglichkeit das ganze visuel umzusetzen.

    Danke

    brainstuff

  • Mein Verfahren ist das einzige Verfahren, was zuverlässig dafür sorgt, dass ALLE nötigen Nachrichten zuverlässig ankommen und dass man sie nicht im SPAM-Ordner suchen muss. Da SPAM unserer Wirtschaft und Gesellschaft weltwert einen riesigen Schaden zufügt, ist inzwischen sogar die UNESCO dabei mein Projekt zu unterstützen. Ich habe es da mit sehr vielen Leuten zu tun, die von Informatik keine Ahnung haben und die trotzdem sehen können müssen, dass das Verfahren extrem "sauber" ist. Desshalb suche ich nach einer Möglichkeit das ganze visuel umzusetzen.

    Gut, das will ich auch mal sehen .


    Aber zu dein accordion

    du hast ein accordion mit zb 5 Falten( sage ich mal dazu )

    auf den Falten steht

    B A S T I


    So soll das zu sehen sein wenn das accordion zu ist ?

    und wenn man auf den accordion drauf klickt geht es ja jenachdem was man geklickt hat auf?

    Richtig ?


    Hast du mal einen Code den du dir vorstellen tust ohne den Katzen Kram ? weil du sagtest ja dasder damit nix zu tun hat und du dein anderes ding haben willst .



    Deswegen , wie sieht dein jetziger Code den aus ?

    Oder hast du noch nix auser den Katzen Code da ?

  • basti1012,


    das Folgende ist der Code den ich jetzt habe ...




    Statt den Bildern, die da aufklappen, kommt dann entweder ein Text, der beschreibt, was der Buchstabe bedeutet, oder (besser) ein Bild was visuel zeigt, wie das email transportiert wird und wie kontrolliert wird, dass es kein SPAM ist.


    Ich habe einen Designer/Zeichner in meinem Netzwerk, der das gut in einem "Cartoon" -Bild erklären kann, da hat es dann ein Bild für jede Phase des Verfahrens.

    Danke,
    brainstuff




    Auf meinem test siehst du dass das p und das d bei offener Schranke, "liegen", die + Zeichen stehen immer richtig.



    Danke,

    brainstuff

  • Ich verstehe es leider immer noch nicht. Und dein Code bringt mich nicht weiter.

    Habe mal etwas gesucht und ein Akkordeon , wie ich es gerade verstehe sieht dann so aus

    https://basti1012.bplaced.net/…rdner=html-seminar&id=367

    5 Buchstaben, anklicken dann Text fertig.

    Der erste Buchstabe ( B ) dreht sich beim anklicken

    Alles andere musst du mir von da aus erklären, weil so verstehe ich es vielleicht.

    Aber einfacher ist warten , weil irgendwann kommen auch andere Leute online, die nicht so hohl sind wie ich

  • basti1012,


    Dein Script ist ein "normaes" Accordeon (eine ganz tolle version!). Das werde ich für eine Variante von meiner Idee einsetzen ... ich habe da eine Idee die mit Deinem Script umsetzbar ist.


    Das script, mit dem ich es zur Zeit versuche und was ich hier gepostet habe hat schräge Balken und ist desshalb besser für mein augenblickliches Projekt geeignet.
    Das script was ich da gepostet habe, geht anscheinend nur wenn es wenigstens leere bilder hat. Desshalb habe ich Dir das auf diese Seite kopiert: http://mail2vip.com/v5/acordeon2.html


    Da siehst Du, dass das (im geschlossenen Zustand, auf dem Smartphone) wie ein Logo aussieht und dass die Balken wie eine Schranke herunterklappen, wenn man eine Falte öffnet. Das script ist zu dem "responsive" und es wird sicher möglich sein, dass ich die Anzeige auch auf normalen screens und auf Smartphone im querformat genau so anzeigen lasse (= gleiche breite, wenn es geschlossen ist) , wie auf dem Smartphone im Hochformat.


    Du siehst da auch, dass das "p" in der ersten Falte im geschlossenen Zustand vertikal zu lesen ist und dann (wenn man die Falte öffnet) in die horizontale kippt. Das ist für die ursprüngliche Version völlig richtig (da hat es dort mehrere Wörter) aber für meine Version ist das nichts: meine Version hat nur einen Buchstaben und der soll auch im geschlossenen Zustand horizontal ausgerichtet sein.


    Danke,

    brainstuff

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!