appmaster

matrix(a, b, c, d, e, f) 요소의 2차원 변환(Transforms)효과를 지정 scale(), skew(), translate() 그리고 rotate()를 지정 요소에 일반 변환(Transforms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용된다. (2D 변환 함수는 matrix로, 3D 변환 함수는 matrix3d로) 따라서 일반적인 경우는 matrix함수가 아닌 일반 함수를 사용하면 된다.) 무슨말인지 모르겠어서 스킵했음

3D 변환으로 회전된 요소의 뒷면 숨김을 설정 값 의미 기본값 visible 뒷면 숨기지 않음 visible hidden 뒷면 숨김 img{ width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); } 이렇게 뒤집힌 상태에서 hidden을 추가하면 이미지는 사라지게 된다. 하지만 뒤집히지 않는 상태에서는 그대로 있다. *hidden을 사용 주의사항 img{ width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); backface-visibili..

1. perspective 하위 요소를 관찰하는 원근 거리를 설정 값 의미 기본값 단위 px, em, cm 등 단위로 지정 .perspective{ width: 200px; perspective: 500px; padding: 70px; } .grand-parent{ width: 200px; border: 3px solid tomato; transition: 1s; transform: rotateX(-45deg); transform-style: preserve-3d; } .parent{ width: 200px; border: 3px solid blue; transition: 1s; transform: rotateY(45deg); transform-style: preserve-3d; } img{ width:..

3D 변환 요소의 자식요소도 3D 변환을 사용할지 결정 값 의미 기본값 flat 자식 요소의 3D 변환을 사용하지 않음 flat preserve-3d 자식 요소의 3D 변환을 사용함 .perspective{ width: 200px; perspective: 500px; padding: 70px; } .grand-parent{ width: 200px; border: 3px solid tomato; transition: 1s; transform: rotateX(-45deg); } .parent{ width: 200px; border: 3px solid blue; transition: 1s; transform: rotateY(45deg); } img{ width: 200px; } grand-parent클래스에서..

transform 변환 속성 속성 의미 transform-origin 요소 변환의 기준점을 설정 transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 perspective 하위 요소를 관찰하는 원근 거리를 설정 perspective-origin 원근 거리의 기준점을 설정 backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정 transform-origin 요소의 변환의 기준점을 설정 값 의미 기본값 x축 left, right, center, %, 단위 50% y축 top, bottom, center, %, 단위 50% z축 단위 0 img{ width: 200px; border: 1px solid lightgray; transition: 1s; ..

1. position VS translate .box{ width: 100px; height: 100px; background: tomato; display: flex; justify-content: center; font-size: 30px; position: relative; left: 100px; top: 30px; } .box{ width: 100px; height: 100px; background: tomato; display: flex; justify-content: center; font-size: 30px; transform: translate(100px, 30px); } 위의 코드와 밑에 코드는 같은 값이 출력이 된다. 하지만 차이가 있다. 만약 원하는 위치에 배치시키고 끝내고 싶다면 p..

요소의 변환 효과(변형)를 지정 transform: 변환함수1 변환함수2 변환함수3...; transfrom: 원근법 이동 크기 회전 기울임; .box{ transform: rotate(20deg) translate(10px, 0); } translate는 움직인다는뜻이다. 즉 x축 10px만큼 움직이고 y축에 0만큼 움직인다는 뜻이다.

CSS 속성의 전환 효과를 지정 선언할때 바뀌기 전의 요소에 transition값을 선언해야한다. CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 --> 전체를 전환 효과를 넣을 수 있고 일부를 선택해서 전환 효과를 넣을 수 있다. all transition-duration 전환 효과의 지속시간 설정 --> ms도 사용 가능하다. 0s transition-timing-function 타이밍 함수 지정 ease transition-delay 전화 효과의 대기시간 설정 0s 사용방법 1. transition-property & transition-duration .box{ width: 100px; heig..