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;
}
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 try to find out the problem but since i'm not css guru I need the help.
I have slider and I try to set custom image on slider-thumb.
The issue is: slider-thumb minimum and maximum position do not reach at the end of range:
This is a demo I play with:
DEMO - try to move thumb bottom-up
This is a code (BTW I use Ionic)
<div class="aa-volume wm-volume-range range" style="position: absolute;top: 3rem;left: 0rem;">
<input type="range" name="volume"
min="0" max="100"
value="{{displayDevice.fan_volume.value}}" ng-model="displayDevice.fan_volume.value" integer
style="max-width: 8rem;width: 8rem;min-width: 8rem;">
</div>
and css:
.wm-volume-range.range {
-ms-transform: rotate(-90deg);
/* IE 9 */
-webkit-transform: rotate(-90deg);
/* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
.wm-volume-range.range i.icon {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.wm-volume-range.range span {
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.aa-volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 38px;
height: 16px;
border-radius: 0px;
background-image: url('http://www.lesliesanford.com/vst/knobman/files/slider-thumbs/SimpleSliderThumb.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, #a1a1a1)
);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background-size: 48px 24px;
background-repeat: no-repeat;
background-position: 50%;
}
Can anybody help to solve it?
The problem is that when you rotate your thumb it keeps its center and it doesn't reach the end of the track. If you don't rotate it, it works
The easiest way would be to rotate the file image before setting it as the background-image of your range thumb.
Otherwise, you can create a custom thumb and move it to follow the real hidden cursor. You can see an example here (the second range).
I want to keep a rotated fixed sidebar exactly 79% from the left but when I add white-space: nowrap; it messes up the location. Perhaps its easier to get the sidebar to stay exactly a # of px's away from a middle div?
https://jsfiddle.net/cs6bya2g/embedded/result/
#sidebar-miniright {
position: fixed;
top: 50%;
left:79%;
width:25%;
/* Safari */
-webkit-transform: rotate(-270deg);
/* Firefox */
-moz-transform: rotate(-270deg);
/* IE */
-ms-transform: rotate(-270deg);
/* Opera */
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
.sidebar-right {
width:auto;
}
^ This is what I want always. But when I resize browser it becomes like the following pic. When I add white-space: nowrap; it causes the left: 79%; to become wonky.
Your sidebar element is rotated on its side, which means width: 25% will make the sidebar's height be 25% the width of the window.
A solution is to delete the width: 25% rule. Update your transform properties to:
-webkit-transform: rotate(-270deg) translateX(-50%);
-moz-transform: rotate(-270deg) translateX(-50%);
-ms-transform: rotate(-270deg) translateX(-50%);
-o-transform: rotate(-270deg) translateX(-50%);
transform: rotate(-270deg) translateX(-50%);
This will center the sidebar text vertically. You can play around with the translateX values to get the desired result.
JSBin demo here.
How can I position a div rotated 90 degrees on the right edge of the page, centered vertically? Thanks in advance.
Try this:
div {
font-family: sans-serif;
background: red;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: bottom left;
position: absolute;
width:200px;
height:20px;
top:50%;
margin-top:-20px; /* height */
right:-200px; /* width */
}
div{
vertical-align:middle;
float:right;
/* FF Chrome Opera etc */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Check this, may help you a bit.
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.