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

CSS3のrotateY()を使ったY軸方向の3D変換を実装する方法

CSS3では、transformプロパティとrotateY()関数を組み合わせることで、要素をY軸（縦軸）を中心に立体的に回転させることができます。Y軸は画面の上下方向に伸びる軸であり、この軸を基準に回転させることで、要素が左右に傾くような奥行きのある表現が可能になります。

以下のコードでは、通常のdiv要素と、rotateY(150deg)を適用したdiv要素を並べて表示し、Y軸回転の効果を視覚的に確認できるようにしています。

サンプルコード

<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>
         tutorialspoint.com
      </div>
      <p>Y軸を中心に回転</p>
      <div id = "yDiv">
         tutorialspoint.com.
      </div>
   </body>
</html>

コードの解説

  • rotateY(150deg)：要素をY軸を中心に150度回転させます。角度の値を変更することで、回転の度合いを自由に調整できます。
  • -webkit-transform：古いバージョンのSafariなど、WebKit系ブラウザ向けのベンダープレフィックスです。現在の主要ブラウザでは標準のtransformプロパティのみで動作しますが、互換性を考慮して併記するのが安全です。

より立体感を出すには

親要素にperspectiveプロパティを指定すると、遠近感のあるより自然な3D表示になります。例えば、コンテナに対してperspective: 600px;のように設定すると、回転した要素に奥行きが生まれ、リアルな立体感を演出できます。また、transitionプロパティと組み合わせれば、マウスオーバー時にスムーズに回転するアニメーションも簡単に実装可能です。

  1. CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方

    CSS3には「フレキシブルボックス（Flexible Box）」と呼ばれるレイアウトモードが用意されており、一般的にFlexbox（フレックスボックス）として知られています。Flexboxを活用すれば、複雑なWebアプリケーションやWebページのレイアウトも、従来のfloatやpositionを使った手法に比べて、はるかに簡単かつ柔軟に構築できます。Flexboxは「コンテナ（親要素）」と「フレックスアイテム（子要素）」で構成されます。コンテナに指定できる主なプロパティは以下のとおりです。flex-direction：アイテムが並ぶ方向（主軸の向き）を指定しますflex-wrap：アイテムの折

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ