CSS3: rotation-point プロパティ - ブロックレベル要素の回転の中心座標

■ 概要

項　　目説　　明
記述形式 セレクタ {rotation-point: x-座標 y-座標 }
値 の形式 数値　（%）
初 期 値 50% 50%
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 ブロックレベル要素
継　　承 しない

■ 解説

rotation-pointプロパティ は，ブロックレベル要素を rotationプロパティを用いて回転するとき，中心座標の位置 を要素の左上端点からの距離で指定します。　単位は要素の幅と高さを基準とした百分率（%）の値を使用します。

指定できる値の形式は，以下のとおりです。

値説　　明
x-座標 要素の左端からの距離を，幅を基準とした百分率（%）の値で指定します。
y-座標 要素の上端からの距離を，高さを基準とした百分率（%）の値で指定します。

■ 使用例１　（ rotation-point プロパティの利用１）

この例では，rotation プロパティの指定はありませんが，初期値の "50% 50%"（要素の中心位置）を中心として180度回転されます。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
   H4.updn { rotation: 180deg; }
-->
</style>
HTML
<body> ～ </body>		 
<h4 class="updn">180度回転（上下逆転）</h4>

ブラウザー 表示例　（未対応のブラウザーでは正しく表示されません）

180度回転（上下逆転）

■ 使用例２　（ rotation-point プロパティの利用２）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
   thead th {
      block-progression: rl;
      padding: 0.5em 1em;
      rotation: 45deg;
      rotation-point: bottom left;
   }
-->
</style>
HTML
<body> ～ </body>		 
<table border="1">
  <thead style="background-color: #CCCCCC;">
    <tr>
      <th>品名</th><th>単価</th><th>数量</th><th>価格</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>小計</th><td><br></td><td><br></td><td>5,600</td>
    </tr>
    <tr>
      <th>総計</th><td><br></td><td><br></td><td>5,600</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>ぬいぐるみ</td><td>3,200</td><td>1</td><td>3,200</td>
    </tr>
    <tr>
      <td>チョコレート</td><td>800</td><td>3</td><td>2,400</td>
    </tr>
  </tbody>
</table>

ブラウザー 表示例　（未対応のブラウザーでは正しく表示されません）
品名単価数量価格
小計

5,600
総計

5,600
ぬいぐるみ3,20013,200
チョコレート80032,400

■ 備考

【参考ページ】