3D Flip Button 만들기

류경혜 2022. 5. 11. 21:00

https://www.youtube.com/playlist?list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg

HTML+CSS+JS 미니 프로젝트 실습 - 프론트엔드 개발자 입문편

www.youtube.com

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Flip Button</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="flip-btn">
        <div class="front">front</div>
        <div class="back">back</div>
      </div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: black;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}
.flip-btn {
  width: 200px;
  height: 100px;
  color: white;
  text-align: center;
  line-height: 100px;
  transform-style: preserve-3d;
  transition: 0.5s;
  cursor: pointer;
}
.flip-btn:hover {
  transform: rotateX(-90deg);
}
.front {
  background-color: goldenrod;
  height: 100px;
  transform: translateZ(50px);
}
.back {
  background-color: darkgoldenrod;
  height: 100px;
  transform: rotateX(90deg) translateZ(150px);
}

저작자표시 (새창열림)