Tekst upside down met css:

[Webdesigner4]

Beste Helpmij-ers,

Ik heb een stukje code gemaakt waarbij 2 tekstvakken te zien zijn. Ik wil dat de als ik in tekstvak 1 type, in tekstvak 2 diezelfde tekst komt te staan alleen dan upside down. Hier is het stukje code:

<input type="text" id="text1" />
<input type="text" id="text2" onmouseover="function1()" />

En het stukje js dat erbij hoort:
[JS]
function function1()
{
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
text2.value = text1.value;

}
[/JS]
Hoe kan ik er dan voor zorgen dat de tekst in tekstvak 2 upside down wordt? En achter welke naam (bijv. text2) moet die code dan staan?

Mvg,

Webdesigner4:thumb:

 

[quintoo]

-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);

als het goed is moet die css code werken ^^.
bron : stackoverflow.com/questions/6028128/how-do-i-rotate-text-in-css

 

[csshunter]

Ik denk dat je het moet hebben van {transform: rotateX(180deg)}.
Met een gewone rotate komt het hele woord tegelijk op de draaischijf (laatste letter wordt eerste letter op z'n kop), met rotateX wordt er per letter een spiegelbeeld onder gezet.

Het kan ook met {transform: scaleY(-1)}, dat komt op hetzelfde neer.

• Voor Chrome en Opera is de -webkit- prefix nodig, Firefox kan het zonder -moz-, Internet Explorer krijgt de -ms- prefix (zie ook hier).

Test: flippen-met-css3.htm

• Beide methoden werken in Firefox, Chrome, Safari en IE10.
• In Opera en IE9 werkt alleen de scale-methode! (Opera en IE9 kunnen wel de gewone rotate-draaiing toepassen)
• In IE8 en eerder gebeurt er niets (misschien is daar nog een IE-only filter voor te gebruiken, of misschien werkt modernizer of css3PIE o.i.d.).

Verder zou ik de functie aan de eerste text1 hangen, met een onkeyup="function1()".
Dan hoeft niet iemand toevallig over textvak 2 te hoveren om het te zien, maar komt het spiegelbeeld direct tevoorschijn bij het intikken van de letters in het textvak1.

 

[Webdesigner4]

Dankjulliewel!
Alleen heb ik nog een probleem: achter welke selector moet ik die code zetten (in css)?

Mvg,

Webdesigner4

 

[csshunter]

Dat ligt voor de hand: vastknopen aan de id van het element dat gespiegeld moet worden, in dit geval de #text2.

• Test: flippen-met-css3-2.htm

_____
Of probeer deze, met als invul-tekst "Ik doe de choco in de wok".
Zie ook Ambigram en ambigrams.

 

[Webdesigner4]

Beste csshunter,

Ik snap nu hoe het moet omdat ik de "#" voor het id vergat te zetten!

Hartelijk bedankt, vraag opgelost!:thumb:

Mvg,

Webdesigner4:d