TIL 49|★茶屋登録ページ18(3 Dアニメ)

11749 ワード
★茶屋登録ページ テキストリンク
クイックキャンパスネット講座で作成した★茶屋登録ページ.rotatey変換関数を使用して3 Dアニメーションを実装してみます.

🎶 RotateYのコンセプト

  • Y軸回りに回転する変換関数
  • 構文:transform:rotateY(xdeg);
  • 単位:deg

    • HTML

  • reserve-store
  • では、要素の中央ソートのためにクラス名内部のdiv要素
    • が作成されている.
  • には、クラス名メダルdiv要素
    • が記入されています.
  • メダルのサブエレメントでクラス名frontとbackindivエレメントをそれぞれ記入し、各エレメントに画像
    • を接続する
  • クラス名の裏面にはbtnもaリンクで接続され、スタイルはCSSによって制御され、
    • .
    
<!-- RESERVE STORE -->

<section class="reserve-store">
  <div class="inner">

    <div class="medal">
      <div class="front">
        <img src="./images/reserve_store_medal_front.png" alt="">
      </div>
      <div class="back">
        <img src="./images/reserve_store_medal_back.png" alt="">
        <a href="javascript:void(0)" class="btn">
          매장안내
        </a>
      </div>
    </div>

  </div>
</section>

    CSS


  • .reserve-storeバックグラウンドでは、前にpick-your-favoriteセクションで作成したのと同じように、バーをスクロールすると画像が固定され、画像サイズがビューポートに整列して出力されると宣言されます.

  • .reserve-store .medal
  • 幅:334 px,height:334 px>メダルの横、縦幅は前、後横、縦幅と一致
    • である.
  • 透視図:600 px>元素変換時に遠近感を生じさせるため、変換効果が600 pxである場合、600 px以外の観察効果
    • を与える.

  • .reserve-store .medal .front, .reserve-store .medal .back{
  • マルチセレクタ方式で作成
  • 位置:absolute>2つの要素の配置秩序を分散させる
  • backface-visibility: hidden; > 裏には
    • が見えないように書いてあります
  • transition: 1s; > 変換効果を自然にするために、1秒起き
    • と書きました.

  • .reserve-store .medal .front
  • transform : rotateY(0deg); > 0度から
    • を明確に提出する

  • .reserve-store .medal:hover .front
  • transform: rotateY(180deg); > mddalという要素にマウスを置くと、先端がY軸180度に変換されます.
  • でもその前にreserve-store .medal .frontからbackface-visibility:hiddenへ;マウスでコントロールしているのでメダルにマウスを置くとfront要素が見えなくなります

  • .reserve-store .medal .back
  • transform : rotateY(-180deg); > 要素をY軸回りに回転-180(反転)

  • .reserve-store .medal:hover .back {
  • mdedal要素にマウスを置き、前方はY軸の0度に変換されます.見えなかったものが
    • に見えます

  • .reserve-store .medal:hover .back .btn{
  • ボタンもメダル要素内で一緒に切り替えることができ、メダル:サスペンション制御
    • /* RESERVE STORE */

.reserve-store {
    background-image: url("../images/reserve_store_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.reserve-store .inner {
    height: 600px;
    /* 가운데 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
}


.reserve-store .medal {
    width: 334px;
    height: 334px;
    perspective: 600px;
}


.reserve-store .medal .front,
.reserve-store .medal .back {
    position: absolute;
    width: 334px;
    height: 334px;
    backface-visibility: hidden;
    transition: 1s;
}


.reserve-store .medal .front {
    transform : rotateY(0deg);
}


.reserve-store .medal:hover .front {
    transform: rotateY(180deg);
}


.reserve-store .medal .back {
    transform : rotateY(-180deg);
}


.reserve-store .medal:hover .back {
    transform : rotateY(0deg);
}

.reserve-store .medal:hover .back .btn{
    position: absolute;
    top: 240px;
    left: 0;
    right: 0;
    margin: auto;
}
    [JPA]永続性コンテキスト(3)-エンティティクエリー
    Ubuntu - Bash - Alias