I have try to do this once, but unsuccessfully, and now meet the same problem again.
I have to generate HTML table with vertical text like this:
and this HTML should be valid(the same) in excel.
Has anyone done this?
Something more - I am not able to use images too.
It's possible with this css:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
mso-rotate: 90;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
This can not be done using HTML only.
The following property will do the job if you want to rotate your text:
<td style="mso-rotate:90;">I Rotate</td>
http://fabianmejia.blogspot.pe/2008/11/rotate-text-in-web-generated-excel-file.html
<table>
<td style="mso-rotate:90;">No</td>
<td style="mso-rotate:90;">Name</td>
</table>
Related
Can someone please clarify what the shorthand for translate is.
-webkit-transform: translateY(-50%) ;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
How do I condense this?
You just put them all in a line. (not unlike border)
border: 1px solid blue;
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
hopefully you can use autoprefixer to spit out the -prefixes-
Toss it in a CodePen and turn on autoprefixer to check it out - then look at the compiled styles.
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
Is there a way to transpose a background image with CSS? (By "transpose" I mean that every pixel x,y in the source image ends up as pixel y,x in the background.)
Example
Source image:
Transposed image:
The result image can in fact be achieved after scaling it around Y axis with factor of -1 and then applying rotate transform of -90deg. Try this:
div.transposed {
-webkit-transform-origin:left top;
-webkit-transform:scaleY(-1) rotate3d(0,0,1,-90deg);
}
Demo
Note that we have to rotate -90deg instead of 90deg because we use scaleY before, it will turn the positive direction of Y axis from top-to-bottom (downwards) to bottom-to-top (upwards). In fact scaleY(-1) is equal to rotateX(180deg), in 3D, that means the positive direction of Z axis will be inverted (instead of outwards from screen, it will be inwards to the screen), hence the rotating angle should be -90deg instead of 90deg as we might think.
Please test the demo on webkit-based browsers.
If by "transpose" you mean this, it's similar with "rotate 270 deg and reflect vertically" or "rotate 90 deg and reflect horizontally".
There you can find full solution to "rotate background" problem: http://thewebthought.blogspot.com/2013/04/css-rotate-background-images.html
After rotating you can reflect image by transform:scaleY(-1) or transform:scaleX(-1).
If I understand your question you want to rotate the image 90 degrees. pixels along x become pixels along y. In CSS3 this is a transform.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1) /* updated to add flip */;
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
to do this to a background image you would need to apply the CSS transform to the parent of the element that has the background image. Apply another transform to the element so that its contents are not transformed.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1);
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
#myElement
{
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg);
filter: FlipH;
-ms-filter: "FlipH";
}
use this code to rotate the background 90 degrees on an element without affecting the element itself:
#myelement {
height: 164px;
overflow: hidden;
position: relative;
width: 79px;
}
#myelement:before {
background: url("http://i.stack.imgur.com/gMRiV.png") no-repeat;
content: "";
height: 79px;
left: -42px;
position: absolute;
top: 42px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width: 164px;
z-index: -1;
}
and the html code:
<div id="myelement">test</div>
example:
http://jsfiddle.net/fs4Dz/
I need to rotate a text vertically in my HTML5-application.
This works in all browsers except IE9 and lower (couldn't test it in IE10 yet):
.badgeWrapper > h3{
-webkit-transform: rotate(-90deg) translate(-100%, 0%);
-webkit-transform-origin: 0 0 0;
-moz-transform: rotate(-90deg) translate(-100%, 0%);
-moz-transform-origin: 0 0 0;
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;
-o-transform: rotate(-90deg) translate(-100%, 0%);
-o-transform-origin: 0 0 0;
transform: rotate(-90deg) translate(-100%, 0%);
transform-origin: 0 0 0;
width: 140px;
position: absolute;
}
In IE9 (no Quirksmode), the element is rotated but positioned wrong, it's displayed way too low. What am I doing wrong? The elements parent is position:relative btw.
Thanks!
SOLUTION
Sorry to solve my own question, but I had a mistake in giving transform-origin 3 values (which makes it a 3d-transform I suppose) which is not supported by IE9. Removing the last "0" solved the problem.
As supposed by #Spudley I post my solution here, so it maybe will help others with the same problem:
You must not use 3 values for IE <= 9 as those versions of IE do only support 2D-transformations, 3 values however seem to tell the browser it's an (unsupported) 3D-transform.
So this is wrong:
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;
and this is right and working:
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0;
Hope it helps.
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;