Rotate stuff with CSS

https://dev.webpages.dk/

Index
- Index
LAMP stack
- LAMP stack - text
- LAMP stack - video
- Securing Lampstack
- Securing Apache
- Using Cron
HTML
- Webbrowsers
- Formatting
- Special characters
CSS
- Rotate
- Body background
- Banner Fixed
- Tabs
- Expandable textbox
- Gradient fill
- Center on page
- Border types
Javascript
- Navigate to other page
- Two 'GoBack' links
- How to clear a textfield
- Five ways to navigate
- Use a JS confirmbox
- Textarea autoscroll
- Digital clock
- Mouse Events
PHP
- Create Zip archive
- Create DIR
- Create a File
- Write to a File
- Read a File
- Delete a File
- Copy/Rename a File
- Create/Write/convert
- Strip tags from text
- htmlspecialchars
- decode (the above)
- About PAX
- Backup a Cronjob
- Generate Paswords
- How to use POST
- How to use IF
- IF and ELSE
- Radio buttons
- Random image
- Use ISSET
- Use of SESSION
PHP & DB
- Create DB & Table
- Insert to DB
- Select, part 1
- Select, part 2
- Delete from a Table
- Update a Table
- Order a SELECT
- LIKE in a DB query
- TRUNCATE a Table
About
- About

About CSS Transform:Rotate

Transform:Rotate:

This is an example of using the CSS 'Transform'.
You can set the rotate parameter to any value (0-360°) and you can get a result just like you see here to the left, the caption block. (Its a 90° angle).
To the right you can try to set the slider (HTML range) to a value and see how it rotate the 'HELLO WORLD!!!' piece of text. You can use this in images also, and even tags like the <HR>.
You can style a <DIV> block with some content of what you can imagine. You can even use this on SUBMIT buttons and other FORM fields. Right inside the <INPUT TYPE='...'> -tags. And even a <TEXTAREA> And the range itself.

Transform:Rotate

Try moving the slider, and click the button to see the result.

CSS

Here is the sourcecode: I have removed the styling of the text, to provide a clearer example.

<DIV STYLE=transform:rotate(35deg);>HELLO WORLD!!!</DIV>

Icons made by Freepik from www.flaticon.com

Here is an example of how to use the CSS 'transform:rotate' snippet. You can style many different elements using this CSS code.