CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のrotateY()メソッドで要素をY軸方向に回転させる方法

rotateY()メソッドとは

CSS3では、transformプロパティにrotateY(角度)を指定することで、要素をY軸（縦軸）を基準に回転変換できます。角度にはdeg（度）単位の値を指定し、正の値で右回り、負の値で左回りに回転します。

基本構文

transform: rotateY(angle);

実装例

以下は、rotateY(150deg)を使ってdiv要素をY軸方向に150度回転させるサンプルコードです。Safariなど古いブラウザ向けに、-webkit-ベンダープレフィックスも併記しています。

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg);
            /* Safari */
            transform: rotateY(150deg);
            /* 標準の構文 */
         }
      </style>
   </head>
   <body>
      <div>
         tutorials point.com
      </div>
      <p>Y軸の回転</p>
      <div id = "yDiv">
         tutorials point.com.
      </div>
   </body>
</html>

ポイント解説

  • -webkit-transform：SafariなどWebKit系ブラウザ向けのベンダープレフィックスです。
  • transform：標準のCSS構文です。現在の主要ブラウザはすべて対応しています。
  • rotateY(150deg)：Y軸を中心として要素を150度回転させます。

さらに立体感を持たせたい場合は、親要素にperspectiveプロパティを設定すると、奥行きのある遠近感のある回転アニメーションを表現できます。

  1. CSS3のrotateZ()を使ってZ軸方向に要素を回転させる方法

    CSS3では、rotateZ(angle) メソッドを使うことで、要素をZ軸（奥行き方向）を基準に回転させることができます。Z軸は画面の手前から奥へと伸びる軸のため、実際には2D回転のように見えますが、3D変換の一部として扱われます。rotateZ() の基本構文transform: rotateZ(角度);角度には deg（度数法）や rad（ラジアン）などの単位を指定できます。正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。使用例以下の例では、rotateZ(90deg) を使ってdiv要素を90度回転させています。<html>   

  2. CSS3のFlexbox（フレックスボックス）レイアウトを徹底解説

    Flexboxとは？ CSS3には「Flexible Box」、通称Flexbox（フレックスボックス）と呼ばれるレイアウトモードが用意されています。Flexboxを活用することで、これまではfloatやpositioningなどのテクニックを駆使しなければ実現できなかった、複雑なWebアプリケーションやWebページのレイアウトを、シンプルな記述で簡単に構築できるようになります。 Flexboxは「フレックスコンテナ」と「フレックスアイテム」という2つの要素で構成されます。display: flex; を指定した要素がコンテナとなり、その直下の子要素が自動的にフレックスアイテムとして扱われます