want to position dynamic text vertically but text length alters the position of text, here is code snippet, adding more text changes the position try on this link
css
#rotate {
position:fixed;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
height:300px;
background-color:#e1e1e1;
margin-top:0px;
}
I think you are trying to do something like this. Note there is no need to add a set height/width as the translate and transform-origin values will adjust the positioning dynamically.
JSFiddle Demo
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#rotate {
position:fixed;
transform: rotate(-90deg) translateX(-100%);
transform-origin:left top;
background-color:#e1e1e1;
}
Related
I've searched on here and could not find an answer so I apologise if this has been asked before.
Anyway, im creating a website, and one of the effects im using is a slanting div effect.
But when i create it using the transform, rotate and skew for some reason it makes the website scroll from left to right.
Ive tried putting the overflow to hidden on the parent div but it then hides the slanting effect.
Here is my code...
Html:
<div class="container">
<div class="slant"></div>
<!-- rest of the code goes here -->
</div>
Css:
.container{width:100%;position:relative;}
.slant{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: -45px;
position: absolute;
width: 100%;
background-color: inherit;
left: 0;
height: 120px;
overflow: hidden;
z-index: 200;
-webkit-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
-mox-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
-ms-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
-o-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
}
Ive heard you can do this with ::before pseudo-elements but to be honest I dont know how and cant seem to find a tutorial to show me.
Any help is welcome and will be appreciated
Thanks
Do you use scale(1.1,1) for some strong reason?
You can remove it, and also remove default margin and padding from body, so that container shrinks to the width of the browser. Then everything works (tested in Chrome, FF, IE11).
Your css will look like this:
body {margin:0px;padding:0px;}
.container{width:100%;position:relative;}
.slant{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: -45px;
position: absolute;
width: 100%;
background-color: inherit;
left: 0;
height: 120px;
overflow: hidden;
z-index: 200;
width:100%;
-webkit-transform: rotate(-2deg) skew(-2deg) ;
-mox-transform: rotate(-2deg) skew(-2deg) ;
-ms-transform: rotate(-2deg) skew(-2deg);
-o-transform: rotate(-2deg) skew(-2deg) ;
transform: rotate(-2deg) skew(-2deg);
background-color: red;
}
When an object is rotated +180° everything inside it gets flipped so that it is still readable (I guess), I want to avoid that , how to do it?
Just wrap your text in a div and rotate it with an opposite value of the degree that you assign to your parent div:
div.flipped {
background: lightblue;
padding-left: 150px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
div.noflipped {
background: lightblue;
padding-left: 150px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
Demo: http://jsfiddle.net/uTGXx/7/
Consider the following attempt to rotate a paragraph 90 degrees and position it so that the corner that was initially its top-left corner (and which therefore becomes its top-right corner after the rotation) ends up located at the top-right corner of the parent block.
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<p id="text">Foo bar</p>
</div>
</body>
</html>
CSS:
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
transform: rotate(90deg);
position: absolute;
top: 0;
right: 0;
}
In Firefox 19.0.2 on OS X 10.6.8, it fails. This appears to be because, despite the order in which the CSS properties were given, the transformation is applied after the positioning. In other words, the browser:
places #text such that its top-right corner is located at the top-right corner of the parent block, but only then
rotates it, with the result that what is now its top-right corner is not located at the top-right corner of the parent block.
As a result, the transform-origin property isn't much use here. If, for instance, one used transform-origin: top right; then #text would need to be moved downwards by the width it had before it was rotated.
My question: is there a way to tell the browser to apply the CSS positioning properties after the rotation; and if not, then is there instead a way to move #text downwards (e.g. using top:) by the width it had before it was rotated?
NB. Ideally the solution should not require setting a fixed width: for #text, and must not require JavaScript.
You can apply more than one transform to an element, and the order does matter. This is the simplest solution: http://jsfiddle.net/aNscn/41/
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
background: lightBlue;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translate(100%) rotate(90deg);
transform-origin: left top;
-webkit-transform: translate(100%) rotate(90deg);
-webkit-transform-origin: left top;
}
The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Rotating -90deg.
.rotate {
position:absolute;
-webkit-transform-origin: left top;
/* Safari */
-webkit-transform: rotate(-90deg) translateX(-100%);
/* Firefox */
-moz-transform: rotate(-90deg) translateX(-100%);
/* IE */
-ms-transform: rotate(-90deg) translateX(-100%);
/* Opera */
-o-transform: rotate(-90deg) translateX(-100%);
}
Solved: here
This is the code I've added:
left: 100%;
width: 100%;
-webkit-transform-origin: left top;
I've also added some prefixed transform properties so it will be cross browser
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
How I did it:
I've found this question and, as the name of the website says, "fiddled" with the code to obtain this behavior. I guess the solution is left: 100%; instead of right: 0;.
(the width: 100%; is there because for some reason it wasn't 100% and the text would overflow to the next line)
You may want to try using CSS3 #keyframes animation. It will allow you to rotate and reposition in any order you like. Here is a tutorial that may help: [CSS-Tricks][1]
.container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
p {
border: 1px solid blue;
position: absolute;
top: auto;
right: 0;
display: inline-block;
margin: 0;
animation: 1s rotate 1s both;
}
#keyframes rotate {
0% {
transform-origin: top left;
transform: rotate(0deg);
right:0;
}
50% {
right:0;
}
100% {
transform-origin: top left;
transform: rotate(90deg);
right: -64px;
}
}
<div class="container">
<p>some text</p>
</div>
You might want to play around with the translate option which you can apply as the second transform function after rotate and place your element at the exact position that you want to.
There is no other way I guess to tell the browser to use the position properties after the transform function is used using plain css.
See this demo - http://codepen.io/anon/pen/klImq
Place "!important" at the end of the transform line.
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.
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.