How do I rotate text 90 degrees without using the style sheet? I have placed the following instruction in the header area of the page:
<style>
div.rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
Then I placed the following around the paragraph in question.
<div id="rotate-text">
<p>My paragraph</p>
</div>
But its not working and hence my question.
Here is a small visual example:
#rotate-text {
width: 25px;
transform: rotate(90deg);
}
<div id="rotate-text">
<p>My paragraph</p>
</div>
You can use css property writing-mode
writing-mode: vertical-rl
or
writing-mode: vertical-lr
Or using transform property: rotate
transform: rotate(90deg)
you use of id in html code, so you must use of # in css.
Change:
div.rotate-text {
To:
div#rotate-text {
div#rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 100px;
transform-origin: top left;
margin: 50px;
}
<div id="rotate-text">
<p>My paragraph</p>
</div>
Writing mode is better for text content, with transform: rotate() the text container still stays with the horizontal dimensions.
writing-mode: vertical-rl; //Rotate -90deg
writing-mode: vertical-lr; //Rotate 90deg
to get the text reading from the bottom up, use this:
#rotate-text {
writing-mode: vertical-lr;
transform: scale(-1, -1);
}
<div id="rotate-text">
<p>My paragraph</p>
</div>
Related
When I rotate an image using rotate(90) the top of the image is cut off, even if the container has overflow: auto.
#container {
width: 100%;
overflow: auto;
}
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<div id="container">
<img src="https://dummyimage.com/2048x1024/000/fff" id="image" class="rotate90" alt="">
</div>
Example: https://jsfiddle.net/dh0o6vz3/3/
Is there a way to alter the container's css so that it overflows above the image as well as below?
You need to use overflow:visible instead and you may also change the transform-origin depending on how you want to show the image
#container {
width: 100%;
overflow: visible;
border: 1px solid;
}
.rotate90 {
transform: rotate(90deg);
transform-origin: bottom;
}
<div id="container">
<img src="https://dummyimage.com/248x124/000/fff" id="image" class="rotate90" alt="">
</div>
So I ended up having to force a translation, which I guess makes sense.
.rotate90 {
-webkit-transform: rotate(90deg) translate(25%);
-moz-transform: rotate(90deg) translate(25%);
-o-transform: rotate(90deg) translate(25%);
-ms-transform: rotate(90deg) translate(25%);
transform: rotate(90deg) translate(25%);
}
This doesn't work in all cases, as the width of the image determines what % translate I need.
But it works well enough for the use cases I have,
I want to keep the name of my portal on the bottom left corner of the browser window in a vertical direction.
The following is the css styling i am using but the text is coming with a margin to the left and bit of text is also getting clipped.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:60px;
position: fixed;
left: 0;
bottom: 0;
}
can someone help in correcting my css class please.
here's the JSFiddle link
thank you.
lakshman.
Try this one :
.rotate {
transform-origin:0% bottom;
-moz-transform-origin:0% bottom;
-webkit-transform-origin:0% bottom;
-o-transform-origin:0% bottom;
-ms-transform-origin:0% bottom;
transform:rotate(-90deg) translateY(100%);
-moz-transform:rotate(-90deg) translateY(100%);
-webkit-transform:rotate(-90deg) translateY(100%);
-o-transform:rotate(-90deg) translateY(100%);
-ms-transform:rotate(-90deg) translateY(100%);
display: block;
writing-mode: tb-rl;
position: fixed;
left:0; bottom:0;
margin: auto;
font-size:60px;
background-color:lightblue;
}
<div class="rotate">
LeftBottom
</div>
If You change font-size, then change height and line-height too. You can add padding too, but then You don't need change height and line-height (only if font-size is changed).
There is fiddle example with changed font-size (height, line-height) and padding (just to see how it's working).
UPDATE : I made changes by removing height and line-height. Here and in fiddle example. It's working better.
look at this updated jsfiddle, when you rotate the text it does so from the middle of the div, so when its -90 degrees and on the bottom of the screen part of the div will rotate beneath the window.
.newRotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:70px;
position: fixed;
left: -100px;
bottom: 110px;
}
To alleviate this I changed the left and bottom position
You can try this and see if its what you are looking for.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size:60px;
position: fixed;
left: -80px;
bottom: 90px;
}
Is it in any way possible to rotate the entire webpage 90 degres and then fit the screen size? When I do the transform:rotate(90deg); the width and height ratio is the same as before.
How can I fit the HTML element inside the screen after rotating?
HTML:
<div id="red">
Content
</div>
CSS:
#red {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background-color:#ff0000;
}
JSfiddle
Imagine the following HTML code:
<html>
...
<div id="stuff1">
barbaz
</div>
<div id="stuff2">
foobar
</div>
...
</html>
Now, suppose I want to make use of CSS so that
stuff2 appears above stuff1. Is there a way to do this
without using position: absolute and without changing the HTML
code?
I have tried using float like this:
#stuff2 { float: left; }
#stuff1 { clear: left; }
but it didn't work out. It remained the same as without using
float.
I was successful to get the second element first but not in the next line as you were expecting.
#stuff1{display:inline-block;/* or display: inline; */}
#stuff2{float:left;}
Working Fiddle
or else
You can also use transform CSS3 property
#stuff1{
background-color:red;
transform: translate(0px, 100px);
-webkit-transform: translate(0px, 100px);
-moz-transform: translate(0px, 100px);
-o-transform: translate(0px, 100px);
-ms-transform: translate(0px, 100px);
}
#stuff2{
background-color:green;
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
}
Working Fiddle
And also check this out paul Irish website for performance graph between translate and positioning.
If you don't know the height then use javascript or jQuery to calculate the height.
Try below css, may be this we ll be help
#stuff2 { float: left; margin-top: -40px; }
#stuff1 { clear: left; margin-top: 30px; }
I have some text in a div which is also in divs for having a double borders around it.
You can see it live here: http://jsfiddle.net/43y46/
I would like to place a text rotated 90° at bottom right of it.
Something like this:
My rotated text should be placed in the blue space on the screenshot.
Can you help me?
Thanks.
As discussed here Use this style for your text span.
.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=1);
}
Done! :)
http://jsfiddle.net/43y46/1/
Something like this?
http://jsfiddle.net/43y46/5/
Here is my solution
<div id="content">
<div class="outer-gray">
<div class="inner-gray">
#RenderBody()
<div class="rotate">Text rotated here</div>
</div>
</div>
</div>
And the CSS
.rotate
{
position: absolute;
right: -20px;
bottom: 5px;
font-size: 10px;
color: #cccccc;
padding-top: 70px;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
}