CODEWITHSUNDEEP
htmlcss
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Text overflowing out of Div When using transform: rotate(90.0deg)

here is my Work http://jsfiddle.net/2h8tv/

enter image description here

Here i am using css transform: rotate(90.0deg) . You can see the text coming out of the container. How can solve this without using padding or margin

Upvotes: 0

Views: 491

Answers (4)

matewka
matewka

Reputation: 10148

I think that using transform-origin should be the most proper thing in this case. When you rotate an element with transform: rotate(x), the rotation is done by a specific origin. By default, this origin is set to 50% 50% which is the exact center of the element.
Add the following style to .rotate class

-webkit-transform-origin: 8px 12px;

However, you can make this rule more general:

-webkit-transform-origin: 50% 12px;

First part of the property is vertical position of the origin point. So in this case we set it to middle (50%). The second one defines horizontal position of the origin, so depending on parent div's width we should set it in px.

Upvotes: 3

Dominic Green
Dominic Green

Reputation: 10260

You have a few options here, obviously just adding padding would be the easiest.

But you can also mess with the transform-origin policy.

transform: rotate(90deg); transform-origin:8px 12px;
-ms-transform: rotate(90deg); /* IE 9 */
-ms-transform-origin:8px 12px /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-webkit-transform-origin:8px 12px /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-moz-transform-origin:8px 12px /* Firefox */
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin:8px 12px /* Opera */

See and example here http://jsfiddle.net/2h8tv/2/

Upvotes: 2

Mini John
Mini John

Reputation: 7941

You could use a non-breaking Space  

<div class="orangeblock "><div class="rotate"> &nbsp;Free</div></div>
<div class="yelloblock"><div class="rotate"> &nbsp;$1999</div></div>

Check -> http://jsfiddle.net/2h8tv/1/

Upvotes: 1

Kishori
Kishori

Reputation: 1095

If you increase the font-size of .rotate. it will get aligned.

Upvotes: 0

Related Questions