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>

Solution

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>