주님 감사드립니다!
CSS_Transform
인터렉티브 웹개발 제대로 시작하기를 보면서 정리하는 글
CSS Transform - mdn
Css TransForm은 CSS3 Spec에서 처음 등장하는 개념이다. 따라서, 오래된 브라우저들에서는 지원하지 않을 수 있다. Transform을 쓰지 않아도, Width, Height등을 바꿔서 작업하는게 가능했다. 하지만 Transform은 조금 다르고, 기능이 훨씬 많다. 변형전용으로 나온 툴이다.
- 기존과의 차이점
기존에는 width, height를 바꿀 때, 왼쪽 위를 기준으로 잡고 늘림.
기존 width, height가 이런식으로 왼쪽 위를 기준으로 잡고 늘리는 방식이었다면, transform의 경우 기본 중앙에서 시작하고, 기준점을 맘대로 바꿔줄 수도 있다.
이외에도 다양한 기능들이 많다. 회전, 비틀기, 3D등.
CSS Transform은 성능이 좋다. : 하드웨어 가속을 이용해 성능이 좋다. (GPU를 사용하기 때문에)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box-container{
display: flex;
}
.box{
width: 100px;
height: 100px;
border : 1px solid black;
background: rgba(255,255,0,0.7);
}
.box:hover{
}
</style>
</head>
<body>
<h1>CSS Transform</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos, facilis iure sapiente
repudiandae provident ipsam corrupti amet minus odio
voluptatum rerum sint minima autem vel! Repellendus inventore deleniti corrupti magni.
</p>
<div class="box-container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nisi consectetur in quibusdam corrupti beatae repellat
ad quis impedit vero veniam ratione voluptas aperiam
repellendus voluptate voluptatum quas eius, commodi tempora!
</p>
</body>
</html>우선 이런식으로 기본 box div가 있는 html 페이지를 만들어줬다.
여기서 hover를 이용해, 마우스를 hover시킬때마다 박스 사이즈가 2배로 늘어나는 기능을 만들어보면,
.box:hover{
transform: scale(2)
}이런식으로 해주면
이렇게 가운데를 중심으로 크기가 2배로 커지는 거를 볼 수 있다.
width, height를 조정했을 때
.box:hover{
width: 200px;
height: 200px;
}
다른애들을 밀어내고, 왼쪽 위를 기준으로 늘어난다.
transform을 이용했을 때는, 다른애들은 가만히 있고, 적용된 애만 단독으로 움직임.
문득 두개를 다 써주면 어떻게 될까 궁금해서 다음과 같이 적용시켜봤다.
.box:hover{
transform: scale(2);
width: 200px;
height: 200px;
}결과는 두개가 복합적용되었다.
여러개 속성을 동시에 적용할 때는 한칸 뛰고 써주면 된다. (쉼표 (,)아님!)
.box:hover{
transform: scale(2) rotate(30deg);
}
그 외 다양한 속성들 (이동, 비틀기 등)은 위 MDN 문서에 나와있다.
transform: translate(30px, 10px);를 해주면, 기준점을 기준으로 왼쪽에서 오른쪽으로 30px 이동, 위에서 아래로 10px이동한다.
transform-origin: right bottom;이런식으로 기준점을 설정해줄 수 있다.
transform-origin: 100% 50%;이렇게 숫자로도 기준점을 설정해 줄 수 있다.
먼저나온 숫자가 X축, 2번째가 Y축.
즉, transform-origin: 0% 0%; 은 transform-origin: left top과 같다.
%같은 경우, 30% 50% 같이 더 세부적으로 조정해줄 수 있다.
주님 감사드립니다!
