Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/rotate below:

rotate() - CSS: カスケーディングスタイルシート | MDN

Baseline Widely available

rotate() は CSS の関数で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる座標変換を定義します。結果は <transform-function> データ型になります。

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

要素が回転する中心となる特定の点 — 前述 — は、変換原点とも呼ばれます。既定では要素の中央ですが、 transform-origin プロパティを使用して独自の座標変換原点を設定することができます。

rotate() で生成される回転の量は、 <angle> で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは点対称と呼ばれます。

a

<angle> で、回転する角度を表します。回転方向は書字方向に依存します。 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。

<div>Normal</div>
<div class="rotated">Rotated</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* rotateZ(45deg) と等価 */
  background-color: pink;
}

複数の座標変換を要素に適用したい場合は、座標変換を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。

<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4