Slik Flip horisontal til vertikal i HTML

De fleste nettsider er, logisk nok, formatert til å lese fra venstre til høyre og fra topp til bunn. Men for noen design, er det nyttig å kunne ha tekst kjører sidelengs, enten fra bunnen av skjermen til toppen eller fra toppen til bunnen. Det er enkelt å etterligne denne effekten ved hjelp av tekst-grafikk, men du mister noe av den dynamiske potensialet i tekstfelt, samt muligheten til å kopiere og lime inn venda teksten til andre tekstfelter. En måte er til for å snu tekst fra horisontal til vertikal ved hjelp av HTML-koding.

Bruksanvisning

1 Legg ved teksten du ønsker å snu i en span tag.

Eksempel: <span> Vendt tekst </ span>

2 Sett inn en Webkit forvandle kommando for å snu teksten for Safari-brukere. Bruk -90 for å ha den tekst som går fra bunnen av skjermen til toppen, og 90 for å få den tekst som går fra toppen til bunnen. Bruk semikolon for å skille denne kommandoen fra følgende nettleserspesifikke kommandoer.

Eksempel:

<Span -webkit-transform: rotate (-90deg);> Vendt tekst </ span>

3 Sett inn en andre transkode ved hjelp av Mozillas nettleser-spesifikk prefiks.

Eksempel:

<Span -webkit-transform: rotere (-90deg); -moz-transform: rotate (-90deg);> Vendt tekst </ span>

4 Sett inn en BasicImage filter for å snu teksten for Internet Explorer-brukere. I dette tilfellet vil rotasjon verdi 3 kjøres teksten fra bunn til topp, og en vil løpe teksten fra topp til bunn.

Eksempel:

<Span -webkit-transform: rotere (-90deg); -moz-transform: rotere (-90deg); filter: progid: DXImageTransform.Microsoft.BasicImage (rotasjon = 3);> Vendt tekst </ span>

Hint

• Teste koden i så mange nettlesere som mulig for å sikre at du har det riktig. Selv om det kan være noen mindre endringer fra nettleser til nettleser, gjør dette oppsettet for at flest lesere mulige se teksten som du vil at det skal bli sett.
• Bruk snudd tekst sparsomt. Eldre nettlesere kan ikke gjengi det riktig, og ingen gjeldende metode finnes for å bla tekst i Netscape nettlesere i det hele tatt.