transform 썸네일형 리스트형 HTML CSS - transform 2 3) Rotate 이 기능은 요소를 회전시킬 수 있습니다. 사용방법은 다음과 같습니다. transform : rotate(회전 각도) - 평면상 회전 각도만큼 요소가 회전합니다. transform : rotateX(회전 각도) - x축을 기준으로 요소가 회전 각도만큼 회전합니다. transform : rotateY(회전 각도) - y축을 기준으로 요소가 회전 각도만큼 회전합니다. 예제) [그림1]과 [그림2]와 같이 HTML 및 CSS 파일을 작성하여 저장한 후 HTML 파일을 실행하면 다음과 같은 결과를 얻을 수 있습니다. 위 영상을 보면 맨 위 블록에 마우스 화살표가 위치하면 사각박스가 평면상에서 45도 회전하는 모습을 보실 수 있습니다. 그리고, 아래 사각박스는 가로축을 기준으로 180도 회전하는 .. 더보기 HTMLCSS - transform 1 HTML에서 지정해주는 값만큼 이동하는 translate와 기울기를 주는 skew에 대해서 알아보겠습니다. 1) translate 이 기능은 블록을 좌우상하(x축, y축)로 이동시킬 때 사용합니다. 사용 방법은 다음과 같습니다. transform:translateX(이동거리) : 좌우 방향(x축 방향)으로 이동거리만큼 블록이 이동 transform:translateY(이동거리) : 상하 방향(y축 방향)으로 이동거리만큼 블록이 이동 transform:translate(x축 이동거리, y축 이동거리) : 좌우상하 방향(x축 방향, y축방향)으로 이동거리만큼 블록이 이동 예제) [그림 1] HTML에서는 화면에 블록 3개를 출력하는 내용을 작성했습니다. 그리고, [그림 2] CSS 파일에서 블록의 디자인을 .. 더보기 이전 1 다음
아무개의 취미생활
