뇌 채우기 공간

animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]; .box{ width:100px; height: 100px; background: black; } .box:hover{ animation: first-animation 2s infinite alternate; } @keyframes first-animation{ 0%{ width: 100px; } 100%{ width: 500px; } } @keyframes 2개 이상의 애니메이션 중간 상태(프레임)을 지정 .box{ width:100px; height: 100px; background: black; } .box:hover{ animation: my-animation 1s infinite altern..

transform-origin : 요소의 변환의 기준점을 설정 transform-style: 3D 변환 요소의 자식 요소도 3D변환을 사용할 지 설정 perspective: 하위 요소를 관찰하는 원근 거리를 설정 perspective-origin: 원근 거리의 기준점을 설정 backface-visibility: 3D변환으로 회전된 요소의 뒷면 숨김을 설정 transform-origin img{ margin: 100px; transition: 1s; transform: rotate(45deg); transform-origin: 0% 0%; } transform-origin: 기준점인데 원래 기본값은 50% 50% 0 이다 ( x 축 y축 z축) 그 기준점은 요소의 정 중앙이다. 그런데 0 0 0 으로 바꾸..

img{ transform: perspective(500px) rotateX(45deg); } perspective 뷰는 얼만큼 멀리서 떨어져서 보겠다는 것이기에 값이 커질수록 멀리서 보는 효과가 있다(원근법) 그리고 transform 의 속성에 첫번째에 적어야한다. img{ transform: perspective(500px) rotateY(45deg); }

transform 요소의 변환 효과 (변형)을 지정 transform 속성은 하나고 여러가지 값을 적을 수 있음 여러 함수들이 존재한다. 2D속성 translate : 이동 - translate(x, y) - translate(x) - translate(y) scale : 크기 - scale(x, y) - scale(x) - scale(y) rotate(degree) : 회전 skew : 기울기 - skew(x-deg, y-deg) - skew(x-deg) - skew(y-deg) martrix(n,n,n,n,n,n) : 모두 아우르는 것 .box{ width:100px; height: 300px; background: gray; margin: 300px; transform: rotate(45deg) ;..

css속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 .box{ width:100px; height: 300px; background: gray; margin: 30px; transition-property: width, background; transition-duration: 1s; } .box:hover{ width:300px; background: dodgerblue; } transition은 변하기 전 요소에 적어주면 된다. transition: width 1s, background 1s; 이렇게 단축 속성으로 적을 수 있다. transition-property 전환 효과를 사용할 속성 이름을 설정 transition: all 1s; transition: 1s; 둘다 같은 뜻이다...