HTMLとCSSを使用した3 D Buttonの作成

11015 ワード
TIL CSS html テキストリンク
まず簡単にHTMLコードを書きます.
      <div class="container">
        <div class="flip-btn">
          <div class="front">front</div>
          <div class="back">back</div>
        </div>
      </div>
.flip-btn {
  width: 200px;
  height: 30px;
  color: black;
  text-align: center;
  line-height: 30px;
}
heightとline-heightの値が等しいと、垂直方向が中央になります.
公式のように暗記すればいいです.
ただし、テキストが1行の場合のみ使用可能で、2行の場合はX
.container {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 50%);
  perspective: 1000px;
}

.flip-btn {
  width: 200px;
  height: 100px;
  color: black;
  text-align: center;
  line-height: 100px;
  transform-style: preserve-3d;
}
transform-style: preserve-3dを介して3 D空間を与え、トップクラスの要素perspective: 1000px(パースビューの値が小さいほど、パースビューに近づくほど、大きくなり、遠くなる)を与え、遠近感を与える.
.back {
  background-color: grey;
  height: 100px;
  transform: rotateX(50deg);
}
その後X軸を基準にtransform: rotateX(50deg)を与えると、上記の内容が見えます.
ここではtransform: rotateX(90deg)90度を与え、以下に示すように直角である.

それからtranslateZ(40px)をあげます.羊水をくれれば、私は行きます.👇
translateZ(-40px)個の負数を与えると下がります.👇
.container {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 50%);
  perspective: 1000px;
}

.flip-btn {
  width: 200px;
  height: 100px;
  color: black;
  text-align: center;
  line-height: 100px;
  transform-style: preserve-3d;
  transition: 0.5s;
  /* transition 0.5초 동안 애니메이션 발생 */
}

.flip-btn:hover {
  transform: rotateX(-90deg);
}

.front {
  background-color: white;
  height: 100px;
  color: black;
  transform: translateZ(50px);
}

.back {
  background-color: grey;
  height: 100px;
  transform: rotateX(90deg) translateZ(150px);
}
translateZ, Xの値を適当な位置に与え、hoverの効果を与えると、次のような効果が生じる.

デジタルコードビデオリンク
ありがとう
<スパルタ3週目>1ページのショッピングモールを完成
docker swarmクラスタおよびマルチホストoverlayネットワークテスト