티스토리 뷰

웹/HTML, CSS

[CSS] transition 및 transform

cll179 2018. 7. 27. 17:24

transform(변형)

- 이차원 좌표에서 요소를 변형시키는 프로퍼티이다.

- 값에는 translate(), scale(), rotate(), skew() 4종류의 트랜스폼 함수를 사용해 이동, 확대축소, 회전, 경사를 만들 수 있다.

 

형식 :

transform : 트랜스폼 함수;

ex) transform: rotate(45deg);

 

 

이동(translate)

- translate() 함수는 요소를 X축 방향이나 Y축 방향으로 이동시킬 수 있다.

- X축 방향값을 플러스로 하면 오른쪽으로, 마이너스로 하면 왼쪽으로 이동한다.

- Y축 방향값을 플러스로 하면 아래로, 마이너스로 하면 위로 이동한다.

 

형식 :

translate(x축 방향의 거리, y축 방향의 거리(생략가능) )

translateX(x축 방향의 거리)

translateY(y축 방향의 거리)

ex) transform : translate(50px, 30px);

 

 

확대/축소(scale)

- scale() 함수는 요소를 X축 방향이나 Y축 방향으로 확대/축소 할 수 있다.

- 변형 기준점은 객체의 중심이다.

 

형식 :

scale(x축 방향의 거리, y축 방향의 거리(생략가능) )

scaleX(X축 방향의 거리)

scaleY(Y축 방향의 거리)

ex) transform: scale(0.5, 0.5);

 

*예시

전체를 30% 축소              : scale(0.3, 0.3);

가로를 절반으로 각각 축소 : scale(0.5, 1);

세로를 1.5배 각각 확대      : scale(1, 1.5);

 

 

회전(rotate)

- rotate() 함수는 각도를 지정해 요소를 회전시킬수가 있다.

- 플러스 각도를 지정하면 시계방향으로, 마이너스 각도를 지정하면 시계 반대방향으로 회전한다.

- 회전의 기준점은 객체의 중심이다.

 

형식 :

rotate(회전의 각도)

ex) transform : rotate(45deg);

 

 

경사(skew)

- skew() 함수는 X축 방향과 Y축 방향으로 요소를 기울일 수 있다.

- 기울기의 기준점은 객체의 중심이다.

 

형식 :

skew(X축 방향의 경사 각도, Y축 방향의 경사 각도(생략가능) )

skewX(X축 방향의 경사각도)

skewY(Y축 방향의 경사각도)

ex) transform : skew(30deg, 0);

 

transition(트랜지션 애니메이션)

- transition은 애니메이션으로 프로퍼티 값을 변화시킬 수 있는 프로퍼티이다.

- 예를 들어, 어떤 한 객체의 크기가 변할 때 한순간에 크기가 바뀌는데, transition 프로퍼티를 사용하면 점진적으로 크기가 변화하게 된다.

 

예시)

*일정 시간으로 프로퍼티 변화시키기(transition-duration)

- 변화하는 데 걸리는 시간을 설정하는 값이다.

 

ex)

transition : 1s;   -  1초에 걸려 객체가 변화하게 된다.

 

 

*특정 프로퍼티만으로 트랜지션 효과내기(transition-property)

- 여러 프로퍼티 중특정한 곳에만 트랜지션 효과를 내고 싶은 경우 사용한다.

 

ex)

transition : background-color 1s; - 배경색에만 트랜지션 효과를 나타낸다.

 

*트랜지션 효과 시작에 시간차를 붙인다(transition-delay)

- 타이밍이 발생하고 나서 실제로 변화가 시작되기까지의 시간을 지정하는 프로퍼티이다.

- 일괄지정으로 기술하는 경우 반드시 trasition-duration 보다 뒤에 기술되어야 한다.

 

ex)

transition : background-color 1s 0s, color 1s 1s; 

transition-timing-function

- transition 관련 프로퍼티 중 또 다른 변화 방법중 하나이다.

- 각 특징에 따라 변화하는 방법이 각각 다르다.

 

값 

변화 방법 

 ease(초깃값)

 점진적으로 시작해 점진적으로 끝난다. 

 linear

 일정 속도로 변화 

 ease-in

 천천히 시작한다. 

 ease-out

 천천히 끝난다.

 ease-in-out

 천천히 시작해 천천히 끝난다.

 

예제)

*test.html

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .outside{
      position: relative;
      background-color: blueviolet;
      width : 100px;
      height: 30px;
      font-size: 0.8em;
      color:#fff;
      left:100px;
      top:100px;
      transform: scale(1);
    }
    #outside1{
      transition: left 0.5s linear; /*이 부분 차이*/
    }
    #outside2{
      transition: left 0.5s ease-in;/*이 부분 차이*/
    }
    #outside3{
      transition: left 0.5s ease-out;/*이 부분 차이*/
    }
    #outside4{
      transition: left 0.5s ease-in-out;/*이 부분 차이*/
    }
    #outside5{
      transition: left 0.5s ease;/*이 부분 차이*/
    }
  </style>
</head>
<body>
  <div class="outside" id="outside1" style="left:100px;">linear</div>
  <br>
  <div class="outside" id="outside2" style="left:100px;">ease-in</div>
  <br>
  <div class="outside" id="outside3" style="left:100px;">ease-out</div>
  <br>
  <div class="outside" id="outside4" style="left:100px;">ease-in-out</div>
  <br>
  <div class="outside" id="outside5" style="left:100px;">ease</div>
  <button>right!</button>
</body>
<script src="trantest.js"></script>
</html>
 
 cs

 

*trantest.js

1
2
3
4
5
6
7
8
var target = document.querySelectorAll(".outside");
var btn = document.querySelector("button");
btn.addEventListener("click",function(){
  for(var i = 0; i < 5; i++){
    var pre = parseInt(target[i].style.left); //style이 인라인 형식으로 되어 있어야 파싱된다.
    target[i].style.left = pre + 100 + "px";
  }
})
 cs

 

참고 사이트 : http://www.edwith.org/


※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > HTML, CSS' 카테고리의 다른 글

[HTML,CSS]position 레이아웃  (0) 2018.05.26
[HTML,CSS]float 레이아웃  (0) 2018.05.22
[CSS]미디어 쿼리  (0) 2018.01.23
[CSS]그리드  (1) 2018.01.23
[CSS]박스 모델  (0) 2018.01.22
댓글