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

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

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

Baseline Widely available

rotateY() は CSS の関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる座標変換を定義します。結果は <transform-function> データ型になります。

transform: rotateY(45deg);

transform: rotateY(-0.2turn);

transform: rotateY(3.142rad);

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

回転軸は、CSS の transform-origin プロパティで定義される原点を通ります。

メモ: rotateY(a) は rotate3d(0, 1, 0, a) と等価です。

メモ: 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

rotateY() で生成される回転の量は、 <angle> で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

a

<angle> で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。

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

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

.rotated {
  transform: rotateY(60deg);
  background-color: pink;
}

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