3D Card

Javascript

3D Card

HiroDaegu 2022. 4. 27. 00:37

728x90

SMALL

<!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 Card</title>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>
</head>
<body>
  <div class="container">
    <div class="card" id="card" onmousemove="transformation(event)" onmouseout="stablecard()">
      <h3 class="title" id="title">TOKYO</h3>
    </div>
  </div>
</body>
</html>

body {
  background-color: #000;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
}

#card {
  position: relative;
  width: 250px;
  height: 350px;
  margin: 10%;
  background: url("url") center no-repeat;
  background-size: cover;
  border: 2px solid violet;
  border-radius: 10px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: all .5s ease-out;
}

.title {
  color: violet;
  position: absolute;
  top: 40%;
  right: 10px;
  transform: translateY(-50%);
  transition: transform .5s ease-in;
}

let elem = document.getElementById("card");
let elem1 = document.getElementById("title");
let rect = elem.getBoundingClientRect(); 

function transformation(event) {
  let x = event.clientX;
  let y = event.clientY;
  console.log(x, y, rect.x, rect.y);
  makeTransformation(x, y);
}

function makeTransformation(x, y) {
  let x1 = x-(rect.x +(rect.width/2));
  let y1 = y-(rect.y+(rect.height/2));
  console.log(x-(rect.x+(rect.width/2)), y-(rect.y+(rect.height/2)));
  console.log(Math.cos(x1) * 20, Math.cos(y1) * 20);
  elem.style.transform = `translateZ(10px) rotateX(${x1/5}deg) rotateY(${y1/8}deg)`;
  elem1.style.transform = `translateZ(50px)`
}

function stablecard() {
  elem.style.transform = `translateZ(0px) rotateX(0deg) rotateY(0deg)`;
  elem1.style.transform = `translateZ(0px)`
}

728x90

LIST