[CSS] トランスフォーム (transform)

Study / Javascript, Jquery, Css    作成日付 : 2019/12/19 13:00:26   修正日付 : 2019/12/19 15:23:12

こんにちは。明月です。


トランスフォームとは3Dな表現するように回転、拡大、縮小するスタイルといいます。

何かというと下記の形です。

おはようございます。こんにちは。こんばんは。

トランスフォーム属性は「transform」,「transform-origin」,「perspective」,「transform-style」,「perspective-origin」,「backface-visibility」の６つがあります。

「transform」の属性は変更スタイルを指定することです。回転しようか(rotate)、移動するか(translate),3D軸で移動(translate3d)するオプションもあります。

心痛なオプション(scew)、拡大、縮小(scale)、3D的な拡大、縮小(scake)もあります。

参照 - https://www.w3schools.com/cssref/css3_pr_transform.asp

参照 - https://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-translate3d-cube.html

「transform-origin」は回転の軸を決定するもので基本値は「transform-origin: center center」です。回転、拡大、縮小、心痛で使います。

「perspective」は遠近感の設定です。「perspective-origin」は上の遠近感の設定する時に位置になります。

「perspective-origin:top left;perspective:100px」なら上左の基準で100px距離の遠近感に表示することです。

「transform-style」は上の「perspective」と「perspective-origin」をしようとすると設定する属性です。値は「transform-style: preserve-3d;」だけです。

<!DOCTYPE html>
<html>
<head>
  <style>
    .cube {
      perspective-origin: 300px 300px;
      perspective: 300px;
      transform-style: preserve-3d;
      margin-top: 400px;
      margin-left: 400px;
    }

    .cube .face {
      display: block;
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      color: white;
      text-align: center;
    }

    .cube .front {
      background: rgba(0, 0, 0, 0.3);
      transform: translateZ(50px);
    }

    .cube .back {
      background: rgba(0, 255, 0, 1);
      color: black;
      transform: rotateY(180deg) translateZ(50px);
    }

    .cube .right {
      background: rgba(196, 0, 0, 0.7);
      transform: rotateY(90deg) translateZ(50px);
    }

    .cube .left {
      background: rgba(0, 0, 196, 0.7);
      transform: rotateY(-90deg) translateZ(50px);
    }

    .cube .top {
      background: rgba(196, 196, 0, 0.7);
      transform: rotateX(90deg) translateZ(50px);
    }

    .cube .bottom {
      background: rgba(196, 0, 196, 0.7);
      transform: rotateX(-90deg) translateZ(50px);
    }
  </style>
</head>
<body>
  <div class="cube">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</body>
</html>
1
2
3
4
5
6

「backface-visibility」の場合は「transform」要素で裏面になると見えるかどうかの設定です。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .item {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: blue;
        transition: 2s;
        color:white;
      }
      .item-1 {
        backface-visibility: visible;
      }
      .item-2 {
        backface-visibility: hidden;
      }
      .item-test-checkbox:checked ~ .item {
        transform: rotateY( 180deg );
      }
    </style>
  </head>
<body>
  <input type="checkbox" class="item-test-checkbox">click!<br />
  <div class="item item-1">テスト</div>
  <div class="item item-2">テスト</div>
</body>
</html>
click!
テスト
テスト
最後にウェブサイトなどでよく使える簡単なtrasitionの例を作ります。 
<!DOCTYPE html>
<html>
<head>
  <style scoped="scoped">
    div#exam1 {
      background-color: blue;
      width: 100%;
      font-size: 20px;
      color: white;
      padding: 100px;
    }
    div#exam1.off {
      transition-property: transform;
      transition-duration: 1s;
      transform: perspective(100px) rotateX(-90deg);
      transform-origin: top;
    }
    div#exam1.on {
      transition-property: transform;
      transition-duration: 1s;
      transform: rotateX(0deg);
      transform-origin: top;
    }
  </style>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    function exam1() {
      if ($("div#exam1").hasClass("on")) {
        $("div#exam1").removeClass("on");
        $("div#exam1").addClass("off");
        return;
      }
      $("div#exam1").removeClass("off");
      $("div#exam1").addClass("on");
      return;
    }
  </script>
  <div id="exam1" class="off">
    こんにちは。
  </div>
  <input type="button" value="押してください。" style="width:100%;" onclick="exam1()">
  </div>
</body>
</html>
こんにちは。

何処かで上の似てるな効果を見たことありますが、真似して作ってみました。


筆者の場合はウェブサイトで様々なアクションがあることを別に好きではないです。

アクションが多ければ、コンテンツ集中度が落ちるからです。でも、逆にポイントなどの効果を与える時には良いと思いますね。

◀前の投稿[CSS] トランジション(transition)
次の投稿▶[CSS] アニメーション (animation)
#css,#transform
「Study / Javascript, Jquery, Css」の他投稿
最新投稿