# transform

53개의 포스트
post-thumbnail

threejs note - transform

position (위치 변환) Vector3 사용법 scale (크기 변환) rotate (회전) 물체(Mesh)를 y 축으로 45도, x 축으로 20도를 돌린다고 가정하고 위와 같이 작성하면 아마 의도와 다르게 회전이 될 것이다. 이유인 즉슨 처음에 y 축으로

2022년 5월 10일
·
0개의 댓글

[개발자되기:계산기 mock-up 만들기 2, 애니메이션 효과] Day-9

https://youtube.com/shorts/AgkoNOioSDIhover 전hover 후 (경계선 강조: box-shadow)hover 후 (취소, 숨기기, 최대화 표시 나타남)hover 후 (아이콘 360도 회전)cssactive 시

2022년 5월 5일
·
0개의 댓글
post-thumbnail

트랜지션과 애니메이션

웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들면 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용한다..photo { transform: translate(50px,100px);

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[TIL] CSS 심화

해치웠나..?

2022년 4월 30일
·
0개의 댓글
post-thumbnail

2022 04 26 CSS

움직이고 원래있던 모양을 변경하기 위해서 사용X, Y, Z 값을 이용한다 translate : x,y,z 값을 이용하여 이동시키다 X -> 오른쪽으로 갈수록 숫자는 커진다 Y -> 아래로 갈수록 숫자는 커진다 scale -> 크기가 커진다(배율) rotate

2022년 4월 25일
·
0개의 댓글
post-thumbnail

CSS _ transform

🍕 소개 transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다. !youtube[lY5tWhY1Uqk] 형식

2022년 4월 22일
·
0개의 댓글
post-thumbnail

[220414_TIL] css transform vs positioning

css에서 element의 위치를 변경하는 방법 중에 transform과 positioning(top, left..) 가 있다. 둘 다 육안으로 보이는 결과화면은 같지만, 어떤 상황에서 무엇을 쓰는 게 더 적절할지 알아보려고 한다.

2022년 4월 14일
·
0개의 댓글
post-thumbnail

Card Project(Animated)

손으로 혹은 버튼으로 카드 무한으로 좌 혹은 우로 날리기

2022년 4월 13일
·
0개의 댓글
post-thumbnail

CSS - 레이아웃 가운데 위치하게 만들기

가운데... 다스케떼...

2022년 4월 9일
·
0개의 댓글
post-thumbnail

마우스 올리면 상품 설명 보여주기

css의 transition 그리고 transform 이용해서 마우스 올리면 상품 설명 보여주기.

2022년 3월 8일
·
0개의 댓글
post-thumbnail

요소를 정가운데 정렬할 때 transform: translate(-50%, -50%)를 적용하는 이유

top, left Property가 Element의 top-left corner를 기준으로 이동시켜주기 때문

2022년 2월 25일
·
0개의 댓글
post-thumbnail

CSS 애니메이션(1)

변형과 변형함수

2022년 2월 20일
·
0개의 댓글
post-thumbnail

[CSS] 3D 카드 효과 (transform, perspective)

강의 출처 : Memory Cards | CSS Effects, Local Storage - Brad Traversy카드의 앞 뒤 면을 뒤집을 수 있는 3D 효과 구현하기.아래의 카드를 클릭하면,카드의 뒷면이 나오는 효과. 코드는 아래와 같다.HTMLCSSJS3D -

2022년 1월 19일
·
0개의 댓글
post-thumbnail

transition & transform

transition-property, transition-duration, transition-timing-function 과 transition-delay 를 위한 단축속성.이 속성으로 요소의 두 가지 상태 사이에 변화를 줄 수 있음.이때, 요소의 상태는 가상클래스나

2022년 1월 19일
·
0개의 댓글
post-thumbnail

CSS 효과

css를 사용하면 요소나 텍스트에 그림자(Shadow) 효과를 부여할 수 있습니다텍스트에 그림자 효과를 주는 속성입니다작성 방식은 다음과 같습니다요소에 그림자를 부여하는 속성입니다작성 방식은 다음과 같습니다그레이디언트(Gradient)는 2가지 이상의 색을 혼합해 배경

2022년 1월 18일
·
0개의 댓글
post-thumbnail

1. Javascript Drum

키보드 입력을 인식해서 그에 맞는 소리를 출력하는 드럼을 만들자키보드가 눌리는 이벤트(keydown)이 발생하면'playSound' 콜백함수가 실행된다.선택자를 이용해 html element를 가져온다.선택자에 해당하는 요소가 여러개 있으면 DOM tree 맨 위에 있

2022년 1월 6일
·
0개의 댓글

sidebar 만들기

클릭하면 나오는 sidebar

2021년 12월 13일
·
0개의 댓글
post-thumbnail

Ghost Defense - 3) hero와 ghost 이동 ( 브라우저 성능 고려한 코드 작성하기 )

브라우저의 렌더링 순서와 performance를 고려한 코드를 작성하자.no!yes!박스여우(tistory) - 브라우저 렌더링 성능 최적화 - Repaint가 일어나지 않는 CSS 속성

2021년 12월 2일
·
0개의 댓글