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,
Related
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>
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;
}
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 would like to rotate an image by 90 degrees with CSS only.
I can do the rotation, but then the position of the image is not what it should be. First, it will overlay some other elements in the same <div>. Second, its vertical dimension will become bigger than the containing <div>.
Here is my code where the two classes are defined:
.imagetest img {
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
width: 100%;
}
.photo {
width: 95%;
padding: 0 15px;
margin: 0 0 10px 0;
float: left;
background: #828DAD;
}
<article>
<section class="photo">
<div>Title</div>
<div class="imagetest">
<img src="https://picsum.photos/200/100"/>
</div>
</section>
</article>
Is there a way of keeping the image within the section? I can translate and scale the image so that it is within the section, but that works only, if I know the image size beforehand. I would like to have a reliable method that does not depend on the size.
The trouble looks like the image isn't square and the browser adjusts as such.
After rotation ensure the dimensions are retained by changing the image margin.
.imagetest img {
transform: rotate(270deg);
...
margin: 10px 0px;
}
The amount will depend on the difference in height x width of the image.
You may also need to add display:inline-block; or display:block to get it to recognize the margin parameter.
Give the parent a style of overflow: hidden. If it is overlapping sibling elements, you will have to put it inside of a container with a fixed height/width and give that a style of overflow: hidden.
I know this topic is old, but there are no correct answers.
rotation transform rotates the element from its center, so, a wider element will rotate this way:
Applying overflow: hidden hides the longest dimension as you can see here:
img{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.imagetest{
overflow: hidden
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/>
</div>
</section>
</article>
So, what I do is some calculations, in my example the picture is 455px width and 111px height and we have to add some margins based on these dimensions:
left margin: (width - height)/2
top margin: (height - width)/2
in CSS:
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
Result:
img{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
/* 455 * 111 */
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" />
</div>
</section>
</article>
I hope it helps someone!
Perform rotation using transform: rotate(xdeg) and also apply overflow: hidden to the parent component to avoid overlapping effect
.div-parent {
overflow: hidden
}
.div-child {
transform: rotate(270deg);
}
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.