Using CSS, one can rotate any component using transform property by providing a degree of rotation.
In this blog, I will show how I used this CSS property to create a manila folder with vertical tabs as shown below.
I have used a panel for the main page and textboxes for the tabs. Use your preferred styles to format the visuals.
In my CSS for the active and the inactive tabs (the textboxes on the right), I have included the transform property with a 90 degree rotation as -ms-transform: rotate(90deg); (for cross browser compatibiltiy, use vendor prefixes). Use onclick script to alternate between CSS styles for activating the tabs.
Please see the attached document for the CSS used in this demo.
Note: using transform property, one can achieve the same effect using the tabstrip component also.
Great idea! Thanks for sharing this, Murali
Cool!
Cook – thanks!
nice one, really good to see how you can get creative with CSS
where can I find the css for this to download please
Thanks for the idea. Wheres the css?
Thanks for the idea. Could you please provide the CSS.