transformで回転させてみる、の続き。｜乱雑モックアップのサンプルページ

html

<div id="wrap">
<p>transform: rotate(0deg)</p>
<div>
<p class="base ori-no">transform: rotate(0deg)</p>
</div>
<div>
<p class="base ori-0-0">transform-origin:0% 0%;</p>
</div>
<p>transform: rotate(0deg)</p>
</div>

css

#wrap {
position:relative;
width:400px;
margin:0 auto;
border:1px solid #f33;
}

.base {
position:absolute;
top:0;
left:0;
line-height:30px;/*テキスト縦位置真ん中*/
height:30px;
}

p {
width:210px;
text-align:center;
margin:0;
}

.ori-no {
background:url(img/210-2.png) no-repeat left top;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}

.ori-0-0 {
/*ie*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/*firefox*/
-moz-transform-origin:0% 0%;
-moz-transform: rotate(-90deg) translate(-100%);

/*safari,chrome*/
-webkit-transform-origin:0% 0%;
-webkit-transform: rotate(-90deg) translate(-100%);

/*いずれopera*/
transform-origin:0% 0%;
transform: rotate(-90deg) translate(-100%);

background:#d7e2b0 url(img/00.png) left top;
}

pre {
background:#f3f0eb;
padding:0.5em 1em;
border:1px solid #d4ccc2;
}