How to rotate TextArea text by 180 degree using JavaScript

Question

I am trying to rotate all alphabets, number and symbols in 180 degree, simply I mean rotating text upside down. But the code is not working, what I am trying to do is possible with this code?

Note: I want to rotate the text written inside TextArea not want to rotate the TextArea.

JsFiddle

Code:

<!DOCTYPE html>
<html>
<body>

<form>
<textarea  id="textArea1" style="height: 100px; width: 468px;"></textarea><br />
<br />
<input onclick="myFunction()" type="button" value="Flip Text" /><br />
<br />

<textarea id="textArea2" style="height: 100px; width: 468px;"></textarea>
 
</form>

<script>
function myFunction() {

  document.getElementById("textArea2").value =  document.getElementById("textArea1").css('transform', 'rotate(180deg)');
  
}
</script>

</body>
</html>

is this solution helps you? https://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text — Azad, Jul 27 '20 at 06:22
Do you want each individual character rotated 180 ? Each line rotated 180? Or the whole text are rotated 180? — Jon P, Jul 27 '20 at 06:42
@Jon P I want whole text or para should be rotate, whatever is written! — santosh, Jul 27 '20 at 06:43
You should update your question to make it clear what you are trying to do. You are not getting the answers you want because the questions isn't clear. People think you want to rotate the textarea itself and you also didn't say that it must happen when a button is clicked. It might help to read [**how do I ask a good question**](https://stackoverflow.com/help/how-to-ask). — FluffyKitten, Jul 27 '20 at 07:00
Check out this link: https://twiki.org/cgi-bin/view/Blog/BlogEntry201110x2 — Keutelvocht, Jul 27 '20 at 07:11

score 0 · Answer 1 · answered Jul 27 '20 at 06:27

0

Change your function content from

document.getElementById("textArea2").value =  document.getElementById("textArea1").css('transform', 'rotate(180deg)');

to

document.getElementById("textArea1").style.transform  = 'rotate(180deg)';

answered Jul 27 '20 at 06:27

dako

1,081
1
12
22

I realized this actually rotating the text area instead of text:( – santosh Jul 27 '20 at 06:36
well, I'm almost sure you cannot rotate only the text inside like that, but someone could know some trick :( – dako Jul 27 '20 at 06:49

Sunny · Answer 2 · 2020-07-27T06:41:21.960

0

within youe textarea style=""add transform property as

<textarea  id="textArea1" style="height: 100px; width: 468px; transform: rotate(180deg)"></textarea><br />

you asked on button click you have to rotate so under clickFunction you have add a line as:

clickFunction(){
   document.getElementById('textArea1').style.transform = 'rotate(180deg)';
}

edited Jul 27 '20 at 06:41

answered Jul 27 '20 at 06:34

Sunny

577
6
20

But I want rotation when button is clicked! – santosh Jul 27 '20 at 06:37

Guryash Singh · Answer 3 · 2020-07-27T07:23:49.457

function myFunction() {

  document.getElementById('rotatedText').innerText = document.getElementById("inputArea").value;
}

#rotatedText {
  width: 468px;
  border: 1px solid #000;
  margin-top: 5px;
  
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<!DOCTYPE html>
<html>

<body>
  <form>
    <textarea id="inputArea" style="height: 100px; width:   468px;">I AM READY TO FLIP.</textarea>
    <br/>
    <input onclick="myFunction()" type="button" value="Flip Text" />
    <br />
    <div id="rotatedText" contenteditable="true"> </div>
  </form>

</body>

</html>

Try if this edited rotation works. Or you may search a reversed font-family. — Guryash Singh, Jul 27 '20 at 07:25

How to rotate TextArea text by 180 degree using JavaScript

3 Answers3