https://zellwk.com/blog/css-translate-values-in-javascript/
HTML,CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>matrix와 정규식을 이용한 transform 값 가져오기</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;min-height:100vh;background:#000;}
#myDiv{
display:flex;flex-wrap:wrap;
flex-direction:column;
justify-content:center;align-items:center;
position:fixed;
top:50%;left:50%;
width:300px;height:300px;
background:#fff;
transform:translateX(-150px) translateY(-300px) translateZ(-450px);
}
</style>
</head>
<body>
<!-- https://zellwk.com/blog/css-translate-values-in-javascript/ -->
<div id="myDiv">
<p>translateX : -150;</p>
<p>translateY : -300;</p>
<p>translateZ : -450; </p>
</div>
</body>
</html>
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
const myDiv = document.getElementById('myDiv');
const myMatrix = window.getComputedStyle(myDiv).transform;
const type = myMatrix.includes('3d') ? '3d' : '2d';
console.log(myMatrix);
console.log(type);
const translate = myMatrix.match(/matrix.*\((.+)\)/)[1].split(', ');
console.log('translate : ',translate);
let x,y,z;
switch(type){
case "2d" :
x = translate[4];
y = translate[5];
break;
case "3d" :
x = translate[12];
y = translate[13];
z = translate[14];
break;
}
console.log(`x : ${x}, y : ${y}, z : ${z}`);
|
cs |
핵심
1) 1차로 불러오기
window.getComputedStyle(myDiv).transform
2) type 판별
const type = myMatrix.includes('3d') ? '3d' : '2d';
3)해당 값만 가져오기
const translate = myMatrix.match(/matrix.*\((.+)\)/)[1].split(', ');
우선 1차로 window.getCoputedStyle(element).transform; 하면 다음같은 결과를 가져옴 :
matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, -300, -450, 1)
어 그러면 그냥 갖다 써도 될 것 같은데... string으로 가져오려고 보면
이렇게 되기 때문에
myMatrix.match(/matrix.*\((.+)\)/) 가 아니라
myMatrix.match(/matrix.*\((.+)\)/)[1] 을 가져와야 하는것임 (숫자랑 쉼표만 온전히 들어있잖어)
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| [vanilla JS] html 파일 jQuery없이 include 하는 법 (0) | 2021.08.03 |
|---|---|
| 삼항연산자 (ternary operator)는 간단한 if문을 더 간단하게 줄일 수있다. (0) | 2021.06.25 |
| 삼항연산자로 Flat Long Shadow 만들기 (HTML/CSS/vanilla JS) (0) | 2021.06.01 |
| 웹/모바일 터치슬라이더 만들기 (vanilla Java Script/vanilla JS) (0) | 2021.05.17 |
| 랑벨 홈페이지 배경 올리브 마우스 패럴렉스 + 3d 효과 (Pixi.js, canvas, webGL 2d) (0) | 2021.05.07 |