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
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,
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>
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; }
Is there a way to use transform rotate a div but keep the background from rotating with it? if not is there another solution with a jQuery or something?
u can try this
<div id="container">
<div id="yourelement"></div>
</div>
and this style
#container{
position: absolute;
top:100px;
left:100px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
width:300px;
height:300px;
overflow:hidden;
}
#yourelement{
position: absolute;
top:-100px;
left:-50px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
width:500px;
height:500px;
background-image:url(../img/bg.jpg);
}
just add an outside wrapper with the background and rotate the inner element instead.
Try using 2 div blocks and overlay the div with rotating content over the fixed background div. Make overlay transparent. Hope it helps.
I have an horizontal menu and I want to rotate 90° left or right some of its tabs.
Problem is that the transform property also rotates descendants.
It looks difficult to put them back in place, is there a solution?
P.S. I want to avoid using images or JS, they are ok as fallbacks.
You could apply the reverse rotation on the descendants.
For example
div.parent{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
div.parent span{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
Example: http://jsfiddle.net/RpcfB/1/
Fyi, you will need to play with padding and/or margin to make it all work.
EDIT
I'm afraid it's more complicated than that.
That's the truth!! Although, I as mentioned, you have to play with the css.
For example, to fix the first one, you need to make these adjustments:
add a class to the first li
#nav_main_gts > li.rotate{ //ADD CLASS HERE
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1);
transform: rotate(-90deg);
}
Then change the second rule to target the next ul not li
Then fiddle with the margin to get it all in place. Remember, because the first li is rotated, down is not left, so a negative margin-left is needed
#nav_main_gts > li.rotate ul{ //CHANGE TO UL HERE
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
transform: rotate(90deg);
margin-left:-100px; //ADD A MARGIN HERE
}
continue with the others.
Updated example: http://jsfiddle.net/FKCTk/1/