# transform
threejs note - transform
position (위치 변환) Vector3 사용법 scale (크기 변환) rotate (회전) 물체(Mesh)를 y 축으로 45도, x 축으로 20도를 돌린다고 가정하고 위와 같이 작성하면 아마 의도와 다르게 회전이 될 것이다. 이유인 즉슨 처음에 y 축으로
[개발자되기:계산기 mock-up 만들기 2, 애니메이션 효과] Day-9
https://youtube.com/shorts/AgkoNOioSDIhover 전hover 후 (경계선 강조: box-shadow)hover 후 (취소, 숨기기, 최대화 표시 나타남)hover 후 (아이콘 360도 회전)cssactive 시
트랜지션과 애니메이션
웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들면 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용한다..photo { transform: translate(50px,100px);
2022 04 26 CSS
움직이고 원래있던 모양을 변경하기 위해서 사용X, Y, Z 값을 이용한다 translate : x,y,z 값을 이용하여 이동시키다 X -> 오른쪽으로 갈수록 숫자는 커진다 Y -> 아래로 갈수록 숫자는 커진다 scale -> 크기가 커진다(배율) rotate
CSS _ transform
🍕 소개 transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다. !youtube[lY5tWhY1Uqk] 형식
[220414_TIL] css transform vs positioning
css에서 element의 위치를 변경하는 방법 중에 transform과 positioning(top, left..) 가 있다. 둘 다 육안으로 보이는 결과화면은 같지만, 어떤 상황에서 무엇을 쓰는 게 더 적절할지 알아보려고 한다.
요소를 정가운데 정렬할 때 transform: translate(-50%, -50%)를 적용하는 이유
top, left Property가 Element의 top-left corner를 기준으로 이동시켜주기 때문
[CSS] 3D 카드 효과 (transform, perspective)
강의 출처 : Memory Cards | CSS Effects, Local Storage - Brad Traversy카드의 앞 뒤 면을 뒤집을 수 있는 3D 효과 구현하기.아래의 카드를 클릭하면,카드의 뒷면이 나오는 효과. 코드는 아래와 같다.HTMLCSSJS3D -
transition & transform
transition-property, transition-duration, transition-timing-function 과 transition-delay 를 위한 단축속성.이 속성으로 요소의 두 가지 상태 사이에 변화를 줄 수 있음.이때, 요소의 상태는 가상클래스나
CSS 효과
css를 사용하면 요소나 텍스트에 그림자(Shadow) 효과를 부여할 수 있습니다텍스트에 그림자 효과를 주는 속성입니다작성 방식은 다음과 같습니다요소에 그림자를 부여하는 속성입니다작성 방식은 다음과 같습니다그레이디언트(Gradient)는 2가지 이상의 색을 혼합해 배경
1. Javascript Drum
키보드 입력을 인식해서 그에 맞는 소리를 출력하는 드럼을 만들자키보드가 눌리는 이벤트(keydown)이 발생하면'playSound' 콜백함수가 실행된다.선택자를 이용해 html element를 가져온다.선택자에 해당하는 요소가 여러개 있으면 DOM tree 맨 위에 있
Ghost Defense - 3) hero와 ghost 이동 ( 브라우저 성능 고려한 코드 작성하기 )
브라우저의 렌더링 순서와 performance를 고려한 코드를 작성하자.no!yes!박스여우(tistory) - 브라우저 렌더링 성능 최적화 - Repaint가 일어나지 않는 CSS 속성