I would like to put "VERTICAL_TEXT" (third bootstrap column) with 90º rotation.
I have tried the following code:
<div class="row">
<div class="col-xs-2" style="background-color: yellow;">
<span>FOO1</span><br/>
<span>FOO2</span>
</div>
<div class="col-xs-8" style="background-color: red;">
<div>
<span>BAR1</span><br/>
<span>BAR2</span><br/>
<span>BAR3</span><br/>
<span>BAR4</span><br/>
</div>
</div>
<div class="col-xs-2" style="background-color: blue;">
<span class="rotate_text">VERTICAL TEXT</span>
</div>
</div>
.text_rotate {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The following fiddle ilustrates the issue:
https://jsfiddle.net/fbtg1zjx/
Edited:
I included the inline-block style and the text is now rotated as suggested in answers, however the text does not start in the upper part of the document. (the whole text includes 4 characters before N/00001. In green it is the span item, in blue the parent div.
You should put the text_rotate on the parent div.
Many CSS rules including Width, Height and such transforms doesn't work on elements with display:inline, an span is by default an inline elemnt, just give it a display:block or inline-block and it should work for you..
also try to add a general transform rule , transform:rotate(90deg);
to fix the second issue where the text is outside of the container you can use following CSS fixes :
.text_rotate {
/* add translate(50%) to transforms */
-webkit-transform: rotate(90deg) translate(50%);
-moz-transform: rotate(90deg) translate(50%);
-ms-transform: rotate(90deg) translate(50%);
-o-transform: rotate(90deg) translate(50%);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg) translate(50%);
display:block;
}
or use transform origin
.text_rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg);
display:block;
transform-origin: 0% 50%;
}
Please test and see which one is better for your situation.
Hope it helps
I'm trying to create a div which can slant. Here is the code, but it's not working when I style it. CSS implementation works fine without any issues not sure what is the error with style parameter.
https://jsfiddle.net/vytcqbyd/
<div style="display:block;
background-color:yellow;
height:20px;
width:1px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
transform-origin: bottom left;">
</div>
CSS implementation:-
https://jsfiddle.net/4j8n45zz/1/
Im trying to use some CSS3 code to rotate my text but I think it doesn't get recognized?
CSS code:
.menu {
background-image:url('button.jpg');
cursor: pointer;
width: 61px;
height: 205px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;
}
HTML code:
<div id="menu-box">
<a class="menu" href="#" >HOME</a>
<a class="menu" href="#" >MYSELF</a>
<a class="menu" href="#" >PORTFOLIO</a>
<a class="menu" href="#" >CONTACT ME</a>
</div>
Im not sure what the problem is. I am missing something?
You can't transform inline elements; change the display value of .menu to inline-block instead.
Simplified example: http://jsfiddle.net/vg73f/
The <a> tags that your .menu class apply to are inline elements. They need to be block level elements in order for the transform to apply.
By adding display: block; we can see that a transform applies correctly.
http://jsfiddle.net/RvrBM/
Alternatively you could use display: inline-block; to allow the elements to rotate but stay in the inline arrangement.
http://jsfiddle.net/g5BRT/
Additionally, as Pavlo noted in the above comments, you are missing the unprefixed transform in your code. It should look like this:
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
I'm trying to rotate an arrow so it faces down, but not sure if this is possible
HTML
test <span id="rotate">»</span>
CSS
span#rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
If you want to keep the element behaving like the inline span that it is, but also want to rotate it, then you will need to use display: inline-block; on it. This won't force it to a new line like display: block; naturally would.
Here is the correct code (jsFiddle: http://jsfiddle.net/joshnh/wZpP9/):
span#rotate{
display: inline-block;
*display: inline; /* Used to get IE 6 & 7 to behave */
zoom: 1; /* Used to get IE 6 & 7 to behave */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
You need the element to be a block element for rotate to work.
try adding:
display:block;
width:10px;
height:10px;
I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?
Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Old answer:
For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.
.rot-neg-90 {
/* rotate -90 deg, not sure if a negative number is supported so I used 270 */
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
/* IE support too convoluted for the time I've got on my hands... */
}
I am using the following code to write vertical text in a page.
Firefox 3.5+, webkit, opera 10.5+ and IE
.rot-neg-90 {
-moz-transform:rotate(-270deg);
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
Another solution is to use an SVG text node which is supported by most browsers.
<svg width="50" height="300">
<text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>
Demo: https://jsfiddle.net/bkymb5kr/
More on SVG text: http://tutorials.jenkov.com/svg/text-element.html
The CSS Writing Modes module introduces orthogonal flows with vertical text.
Just use the writing-mode property with the desired value.
span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }
<span id="vertical-lr">
↑ (1) vertical-lr 至<br />
↑ (2) vertical-lr 至<br />
↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
↓ (1) vertical-rl 至<br />
↓ (2) vertical-rl 至<br />
↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
↓ (1) sideways-lr 至<br />
↓ (2) sideways-lr 至<br />
↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
↓ (1) sideways-rl 至<br />
↓ (2) sideways-rl 至<br />
↓ (3) sideways-rl 至
</span>
I adapted this from http://snook.ca/archives/html_and_css/css-text-rotation :
<style>
.Rotate-90
{
display: block;
position: absolute;
right: -5px;
top: 15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
</style>
<!--[if IE]>
<style>
.Rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
right:-15px; top:5px;
}
</style>
<![endif]-->
I've had problems trying to do it in pure CSS - depending on the font it can look a bit rubbish. As an alternative you can use SVG/VML to do it. There are libraries that help make it cross browser with ease e.g. Raphael and ExtJS. In ExtJS4 the code looks like this:
var drawComp = Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(), //or whatever..
height: 100, width: 100 //ditto..
});
var text = Ext.create('Ext.draw.Component', {
type: "text",
text: "The text to draw",
rotate: {
x: 0, y: 0, degrees: 270
},
x: -50, y: 10 //or whatever to fit (you could calculate these)..
});
text.show(true);
This will work in IE6+ and all modern browsers, however, unfortunately I think you need at least FF3.0.
If you use Bootstrap 3, you can use one of it's mixins:
.rotate(degrees);
Example:
.rotate(-90deg);
My solution that would work on Chrome, Firefox, IE9, IE10 (Change the degrees as per your requirement):
.rotate-text {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: none; /*Mandatory for IE9 to show the vertical text correctly*/
}
If CSS writing-mode: sideways-lr is what you prefer, and you happen to run into chromium/chrome based browser. You may try
{
writing-mode: vertical-rl;
transform: rotate(180deg);
}
so all modern browsers support it now.
reference: https://bugs.chromium.org/p/chromium/issues/detail?id=680331#c4