CODEWITHSUNDEEP
htmlcsstext-rotation
Jason S
Jason S

Reputation: 189626

using css rotate with HTML absolute position

I'm new to the css transform rotation and want to know how to get it to work with absolute positioning within its parent element. Could anyone help?

enter image description here

Here is a test snippet that mostly does what I want, but the rotated text shows up in the wrong spot. I want it to be in the left padding area of the foo, bar1, and bar2 bubbles.

<html>
<head>
    <style type="text/css">
div.item {
	display: block;
	border: 1px solid #888;
	border-radius: 5px;
	padding: 2px 15px;
}
span.rotated {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	font-family: Verdana, sans-serif;
	font-size: smaller;
    -ms-transform:rotate(270deg); /* IE 9 */
    -moz-transform:rotate(270deg); /* Firefox */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    -o-transform:rotate(270deg); /* Opera */
}
</style>
</head>
<body>
<div class="item">foo<span class="rotated">foodoo the voodoo</span>
  <div class="item">bar1<span class="rotated">bar bar bar bar Barbara Ann</span>
	<div class="item">baz1</div>
	<div class="item">baz2</div>
	<div class="item">baz3</div>
	<div class="item">baz4</div>
	<div class="item">baz5</div>
	<div class="item">baz6</div>
  </div>
  <div class="item">bar2<span class="rotated">Barber of Seville</span>
	<div class="item">baz7</div>
	<div class="item">baz8</div>
	<div class="item">baz9</div>
	<div class="item">baz10</div>
	<div class="item">baz11</div>
	<div class="item">baz12</div>
  </div>
</div>
</body>
</html>

Upvotes: 1

Views: 4374

Answers (2)

Josh Burgess
Josh Burgess

Reputation: 9567

Add the following lines to your CSS. You still need to move the element outside its nominal bounds.

The reason this works is that you have to consider where you're starting that rotation. The default is the middle of the element, which is far off the edge of the page. That's why transform-origin: top left; works.

transform-origin: top left;
transform: rotate(270deg);


<html>
<head>
    <style type="text/css">
div.item {
	display: block;
	border: 1px solid #888;
	border-radius: 5px;
	padding: 2px 15px;
}
span.rotated {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	font-family: Verdana, sans-serif;
	font-size: smaller;
    transform-origin:top left;
    -ms-transform:rotate(270deg); /* IE 9 */
    -moz-transform:rotate(270deg); /* Firefox */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    -o-transform:rotate(270deg); /* Opera */
    transform: rotate(270deg); /* Standards */
}
</style>
</head>
<body>
<div class="item">foo<span class="rotated">foodoo the voodoo</span>
  <div class="item">bar1<span class="rotated">bar bar bar bar Barbara Ann</span>
	<div class="item">baz1</div>
	<div class="item">baz2</div>
	<div class="item">baz3</div>
	<div class="item">baz4</div>
	<div class="item">baz5</div>
	<div class="item">baz6</div>
  </div>
  <div class="item">bar2<span class="rotated">Barber of Seville</span>
	<div class="item">baz7</div>
	<div class="item">baz8</div>
	<div class="item">baz9</div>
	<div class="item">baz10</div>
	<div class="item">baz11</div>
	<div class="item">baz12</div>
  </div>
</div>
</body>
</html>

Upvotes: 0

Jason S
Jason S

Reputation: 189626

Aha, I was missing two things:

  • parent element position has to be specified (relative works)
  • transform-origin needs to be used

I don't get clipping when I use overflow: hidden, however. Hmmm.... Fixed! overflow: hidden needs to go into the parent div.

<html>
<head>
    <style type="text/css">
div.item {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid #888;
	border-radius: 5px;
	padding: 2px 15px;
}
span.rotated {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	font-family: Verdana, sans-serif;
	font-size: smaller;
    -ms-transform:rotate(270deg); /* IE 9 */
	-ms-transform-origin: 0 0;
    -moz-transform:rotate(270deg); /* Firefox */
	-moz-transform-origin: 0 0;
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    -webkit-transform-origin:0 0;
    -o-transform:rotate(270deg); /* Opera */
	-o-transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="item">foo<span class="rotated">foodoo the voodoo</span>
  <div class="item">bar1<span class="rotated">bar bar bar bar Barbara Ann</span>
	<div class="item">baz1</div>
	<div class="item">baz2</div>
	<div class="item">baz3</div>
	<div class="item">baz4</div>
	<div class="item">baz5</div>
	<div class="item">baz6</div>
  </div>
  <div class="item">bar1<span class="rotated">Barber of Seville</span>
	<div class="item">baz7</div>
	<div class="item">baz8</div>
	<div class="item">baz9</div>
	<div class="item">baz10</div>
	<div class="item">baz11</div>
	<div class="item">baz12</div>
  </div>
</div>
</body>
</html>

Upvotes: 3

Related Questions