I need vertical text for a website. Thats my css code:
.vertical-category span {
display: block;
position: absolute;
top: 30px;
left: -37px;
font-size: 20px;
text-transform: uppercase;
color: #ffffff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
Thats well working, but the start position of the first letter depends on the length of the word:
As you can see, the left vertical text is on the red background. the right vertical text is longer and so not at the red background.
what to do, that the position of the vertical text is always fix and not depends on the text length?
It's hard to be completely sure without further context (for instance, where is that background color even coming from), but I believe this issue is your transform-origin. The first 50% is moving the element to the right. Try 0 or some static value:
transform-origin: 0 50%;
http://jsfiddle.net/dAUrF/
EDIT: This fiddle may help you visualize what is happening. The red element is the element before rotation and the yellow is after. Tweak the origin values and see how it affects the rotation.
transform-origin defines the point at which the rotation occurs. With 50% 50% the rotation occurs around the center of the element.
Related
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.
I would like to rotate a full-width div (from side to side without free space) in which will be some content.
I want the corners on the right side to touch the right side of the page and the corners on the left side to touch the left side of the page. I don't think width:200% and overflow-x:hidden is the best solution.
How can I achieve this?
Here is an example. Note that the corners don't touch the sides of the page.
.rotated {
width: 100%;
height: 100px;
background-color: red;
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
<div class="rotated"></div>
You might find the CSS transform skewY() helpful. It will skew the element without rotating the corners.
I've also set the transform-origin to the top right so that the element doesn't skew off the top of the page.
html,body {
margin: 0;
}
.rotated {
height: 100px;
background-color: red;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
transform: skewY(-6deg);
}
<div class="rotated"></div>
For further reference, see the Skewing and Translating example at MDN.
You could increase the horizontal proportion with scale, but the content will be scaled as well (as long as you know it you can compensate)
.rotated {
width: 100%;
height: 100px;
background-color: red;
transform: scale(1.2 , 1) rotate(-6deg);
}
<div class="rotated"></div>
How can I rotate 90 degrees in IE 8 and lower, using only CSS?
.horizontal {
display: block;
width: 300px;
height: 100px;/*height*/
background: #FF0000;
margin: auto;
margin-top: 110px;
text-align: center;
border: 5px solid #000000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
You want to use filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
CSS
.horizontal {
display: block;
width: 300px;
height: 100px;/*height*/
background: #FF0000;
margin: auto;
margin-top: 110px;
text-align: center;
border: 5px solid #000000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}
More information on this
writing-mode which is currently in the CSS3 draft specification allows us to accomplish text rotation without using propriety properties, effectively future proofing the concept as more browsers adopt the CSS3 draft spec.
p { writing-mode: tb-rl; }
That’s it incredibly simple CSS technique that will eventually work with all browsers as their CSS3 support gets better. This is one of the handful of CSS3 supported properties in IE. The tb-rl value tells the browser to display paragraphs with the text flowing from top to bottom, right to left. Essentially rotating the text 90 degrees clockwise and aligning to the right.
This properties true intention is for displaying other languages in their correct “writing mode” such as Japanese right to left or Arabic & Hebrew which display right to left & top to bottom (rl-tb).
Support
At the moment IE is the only browser to support it starting from IE5.5 and up, IE8 adds further values through using the -ms extension. There are 4 values available from IE5.5+ and an additional 4 values for IE8+ through the -ms extension.
lr-tb – This is the default value, left to right, top to bottom
rl-tb – This flows the text from right to left, top to bottom
tb-rl – Flows the text vertically from top to bottom, right to left
bt-rl – bottom to top, right to left
tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
bt-lr – Bottom to top, left to right
lr-bt – Left to right, bottom to top
rl-bt – Right to left, bottom to top
Rotate text in other browsers?
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Online Demo
-ms-writing-mode property
I have an accordion slider. I have a problem with the slider label text, which is not sliding when clicked. Here is the URL to my site.
CSS for the text:
.accordion label h7{
position: absolute;
cursor:pointer;
display: block;
-webkit-backface-visibility: hidden; /* fixes chrome bug */
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}
What am I missing? Is their a way to make the slider auto slider with some seconds lag?
The problem is that .accordion label h7 is set to position:absolute. If you remove that you'll notice the text begins to slide.
A fix I found for the resulting bunched text is to set a width to .accordion label h7.
.accordion label h7 {
width: 200px;
}
The text is sliding, but it is not getting updated. As soon as some CSS properties change, the text jumps to the right position. So maybe try changing a CSS property before you start to animate the text and remove it again after your animation is complete (something like border-color which no one will ever see). (Relevant SO question)
I don't understand how text rotation works in CSS3.
For instance, you can see it here, the rotated text is never on the right location as you want it,
right: 0;
bottom: 0;
it will always have the gap/ margin to the right. and always overrun at the bottom of the box that contain it.
How can I fix this?
Can I use jquery to fix it or any reliable jquery plugin for text rotation out there ?
Thanks.
Positioning the text is not very difficult when you realize you can control the rotation point through...
transform-origin: 0 0 || top left
In your specific case, it works out like this:
.year
{
display: block;
writing-mode: tb-rl;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(270deg);
-moz-transform-origin: bottom left;
-o-transform: rotate(270deg);
-o-transform-origin: bottom left;
-ms-transform: rotate(270deg);
-ms-transform-origin: bottom left;
transform: rotate(270deg);
transform-origin: bottom left;
font-size: 24px;
position: absolute;
right: -50px; /*.year width*/
bottom: 0;
border: 1px solid #000000;
}
If you take out the transformation, you will notice that .year is positioned right next to it's parent box, bottom aligned. Then you specify the bottom left corner to be the "rotation point" and voila! Absolute control over your text positioning.
http://jsfiddle.net/PQ3Ga/
Positioning rotated text in CSS is very difficult. You have to remember that the position takes effect BEFORE the text is rotated. If you remove the rotation in your example, you will see that the unrotated text is correctly positioned.
To correctly position rotated text, you have to calculate how the rotation will affect the position...and then correct that position in the stylesheet.
In your case, you need:
position: absolute;
right: -11px;
bottom: 9px;