フロント実装の練習アウトプット。

まずはこんな画面を作ってみました。

HTMLコード

<div class="backImage">
    <div class="header">
      <div class="title">PG-hummingBird</div>
      <ul class="topList">
        <li class="btn"><a href="#">menu</a></li>
        <li class="btn"><a href="#">contact</a></li>
        <li class="btn"><a href="#">about me</a></li>
      </ul>
    </div>
    <div class="text">
      テキスト部分省略
    </div>
    <ul class="underList">
      <li class="btnBtm"><a href="#">Programing Journal</a></li>
      <li class="btnBtm"><a href="#">Desk Top Music Journal</a></li>
      <li class="btnBtm"><a href="#">Life Style Journal</a></li>
    </ul>
  </div>

cssバックイメージのクラスと設定(一部抜粋)

.backImage{
  　width: 100vw;
    height: 1000px;
    background-image: url("hogehogehoge");
}

ブログのトップページを想定した画面です。
個人的には画像を反転させて、テキストを右にずらしたい・・・・・・。
調べたところ、こんなコードがあるらしい。

.class{
transform: scale(水平軸,垂直軸);
}
******
scale(1, 1);
この状態がデフォルト。変化はありません。

scale(1, -1)
これで上下反転

scale(-1, 1)
これで左右反転。今回のお目当て。

scale(-1, -1)
これで上下左右反転。もう何がなんだか・・・。

そしてこちらが左右反転結果の画面

文字も反転してしまったぞ・・・。

テキストやボタンクラスにもtransformを使えばいいのではということで以下を追加。


.header{
  height: 10vh;
  width: 100vw;
  display: flex;
  transform: scale(-1, 1);
}

.text{
  width: 650px;
  transform: scale(-1, 1);
  margin-top: 200px;
  margin-left: 100px;
  text-align: center;
}

.underList{
  width: 100vw;
  list-style: none;
  display: flex;
  margin-top: 200px;
  justify-content: space-around;
  transform: scale(-1, 1);
}

結果、、、

思い通りのフロントになりました！！