Hi there.
I need to write some code that will enable me to display a block of text upside down on a website made in Google Sites. I don't want the individual words or letters to be upside down; I need a whole block of text to be rotated 180˚, like if you had a text box in Microsoft Word and rotated it.
I've tried using the rotateZ() function in CSS, and it successfully rotates the text. However, I'm having a couple problems:
1. In the preview on the site, it keeps putting the text in a small box with a scrollbar on the side, so that when you look at it, not all the text shows up—you have to scroll through it to see the whole rotated text. I want all the text to show up, no scrolling.
2. I can't get the font in the flipped text to match the font on the rest of the page. I need it to be Lato, 14pt.
Here's the code I've been using. (I put 14 lines of "BLAH BLAH" etc. as a placeholder for the text using.) As is probably apparent, I'm an absolute rookie at CSS; I'm trying to teach it to myself just for the purpose of this project. Any help or suggestions would be greatly appreciated!!
I need to write some code that will enable me to display a block of text upside down on a website made in Google Sites. I don't want the individual words or letters to be upside down; I need a whole block of text to be rotated 180˚, like if you had a text box in Microsoft Word and rotated it.
I've tried using the rotateZ() function in CSS, and it successfully rotates the text. However, I'm having a couple problems:
1. In the preview on the site, it keeps putting the text in a small box with a scrollbar on the side, so that when you look at it, not all the text shows up—you have to scroll through it to see the whole rotated text. I want all the text to show up, no scrolling.
2. I can't get the font in the flipped text to match the font on the rest of the page. I need it to be Lato, 14pt.
Here's the code I've been using. (I put 14 lines of "BLAH BLAH" etc. as a placeholder for the text using.) As is probably apparent, I'm an absolute rookie at CSS; I'm trying to teach it to myself just for the purpose of this project. Any help or suggestions would be greatly appreciated!!
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style>
.rotated {
transform: rotateZ(180deg);
}
h1 {
font-family: 'Lato', sans-serif;
font-weight: 400;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="rotated">
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH <br><br>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</div>
</body>
</html>