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.
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;
}
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; }
When I use this style with #board(the gray one)
-webkit-transform: perspective(500px) rotateX(45deg);
-moz-transform: perspective(500px) rotateX(45deg);
What it looks in Firefox:
But in chrome:
What we need is the one in Firefox. So what should we do to have same look in chrome?
Generally it's best practice to place the perspective on a containing element, such as the body or a wrapping div.
Demo: http://jsfiddle.net/amustill/Qh8YV/
body {
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
div {
...
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
}
I have made a fiddle:
http://jsfiddle.net/89x4d/
I'm trying to maintain the skewed div but keep the p text straight.
Is this possible?
Thanks
You should use 20deg instead of 0deg on P to compensate for the DIV transform (since the result is the composition of transforms.)
In order to cancel the effect of the skew, you have to give positive value of transformation.
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
Demo
div {
width: 200px;
height:50px;
background: red;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
margin: 20px;
padding:0 25px;
}
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
<div>
<p>hey i'm straight, ok?</p>
</div>
hey i'm straight, ok?
I'm not sure if you can get it to skew back, seems to distort the font too much.
skew(20) is the closest i could get, but instead you could setup 2 divs, 1 for a skew box and another to then move over it.
http://jsfiddle.net/gP9ne/3/
Setup a fiddle there for you to see
Martyn
edit: actually doesnt look any different :p i think its just the black on red with the font doesnt like my screen :p
always over thinking!
As others have pointed out, reversing the skew of the <p> can lead to some undesirable results.
It's also not super reusable in that for every new skew angle you would need a corresponding CSS selector/declaration to reverse the internal content.
As an alternative, use the :before selector to add the skewed element behind the text.
HTML
<div>
<p>hey i'm straight, ok?</p>
</div>
CSS
div {
width: 200px;
height:50px;
margin: 20px;
position:relative;
}
div:before {
content: "";
display:block;
background: red;
position:absolute;
width:100%;
height:100%;
z-index:-1;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}
And a demo.