How can i rotate a title 270 degrees? - html

Question

I have a website which i want to rotate a title 270deg on! I have seen many other posts about this but they don't seem to be working for me! Below is the code of the item i want to rotate! Where do i put the code and what do i put?
I want to put it in this code! This is the whole segment for that text!
/* LOGO CSS*/
#logo_index_text a,
#logo_index_left a,
.logo_permalink_page
{
font-weight: {text:Weight Logo Index};
font-family: {font:Font Logo};
color: {color:Text Logo};
}
#logo_index_left{left:{text:Position Logo Left}}
#logo_index_left {top:{text:Position Logo Top}}
#logo_index_text a,
#logo_index_left a
{
letter-spacing: {text:LetterSpacing Logo};
font-size: {text:FontSize Logo Index};
line-height: {text:LineHeight Logo}
}
{block:IfNotLogoOpacityonHover}
#logo_index_text a:hover,
#logo_index_left a:hover{
opacity: 1 !important}
{/block:IfNotLogoOpacityonHover}
.logo_permalink_page{font-size: {text:FontSize Logo Perma}}
The code i have tried is:
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
and
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
and
-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-o-transform: rotate(320deg);
Thanks for the help in advance! :)

Answer 1

Here is the simplest place to start. To me your main logocss seems a bit of a mess, but bear in mind you need to have display: block for anything to rotate.
Fiddle: http://jsfiddle.net/jjBGz/3/

Answer 2

Beneth's method won't work if you have a background...
Here's the real trick:
The secret is having vertical-lr set on the original element, so width and height are already correct.
Then all you have to do is rotate the text 180 degrees with transform-origin center...
Works in Chrome and Firefox and IE 11 & 10 (according to MDN backwards-compatible to IE9, but since ms-transform-rotate doesn't work properly, it degrades gracefully to only writing-mode vertical-lr in IE9, if you omit ms-transform).
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility
https://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx
Example:
.blackhd
{
vertical-align: bottom;
width: 40px;
#height: 100px;
border: 1px solid hotpink;
background-color: black;
text-align: center;
}
.vert
{
display: inline-block;
color: white;
#font-weight: bold;
font-size: 15px;
writing-mode: vertical-lr;
#writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
transform-origin: center;
transform: rotate(180deg);
padding-top: 2mm;
padding-bottom: 3mm;
}
<table>
<tr>
<td class="blackhd"><span class="vert">abc</span></td>
<td class="blackhd"><span class="vert">defghijkl</span></td>
</tr>
<tr>
<td>abc</td>
<td>defghijklmnopqr</td>
</tr>
</table>