transform: rotate(0deg)

transform-origin:50% 50%;

transform-origin:0% 0%;

transform-origin:0% 100%;

transform-origin:100% 0%;

transform-origin:100% 100%;

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

html

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

css

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

.ori-5-5 {
background:url(img/grid-center.png) no-repeat center center;

-moz-transform-origin:50% 50%;
-moz-transform: rotate(-90deg);
-webkit-transform-origin:50% 50%;
-webkit-transform: rotate(-90deg);
}

.ori-0-0 {
background:#d7e2b0 url(img/00.png) left top;
-moz-transform-origin:0% 0%;
-moz-transform: rotate(-90deg);
-webkit-transform-origin:0% 0%;
-webkit-transform: rotate(-90deg);
}
.ori-0-1 {
background:#b0dee2 url(img/01.png) left top;
-moz-transform-origin:0% 100%;
-moz-transform: rotate(-90deg);
-webkit-transform-origin:0% 100%;
-webkit-transform: rotate(-90deg);
}

.ori-1-0 {
background:#e7c8b0 url(img/10.png) left top;
-moz-transform-origin:100% 0%;
-moz-transform: rotate(-90deg);
-webkit-transform-origin:100% 0%;
-webkit-transform: rotate(-90deg);
}
.ori-1-1 {
background:#d4b0e2 url(img/11.png) left top;
-moz-transform-origin:100% 100%;
-moz-transform: rotate(-90deg);
-webkit-transform-origin:100% 100%;
-webkit-transform: rotate(-90deg);
}

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

.base {
line-height:30px;
height:30px;
position:absolute;
top:50%;
left:50%;
margin-left:-105px;
margin-top:-105px;
}