Transform/ Transition

Transform 

:  html 요소를 회전, 크기, 기울이기, 이동효과를 나타낼 때 사용 

 

사용법

 

transform: translate(함수 )
transfrom : scale ( )
transform: rotate ( )

 

&:hover{

    box-shadow: rgb(0 0 0 /80%) 0px 40px 58px -16px,

    rgb(0 0 0 /72%) 0px 30px 22px -10px;

    transform: scale(1.05);   //

    border-color rgba(249,249,249,0.8);

    video{

      opacity:1;

    }

  }

 

 

☑️ `top: 50%;`와 `transform: translateY(-50%);`를 함께 사용하면, 부모 요소의 수직 중앙에 요소를 배치할 수 있습니다.

하지만 이 조합이 항상 원하는 결과를 주는 것은 아닙니다. 상황에 따라 다르게 작용할 수 있습니다.

### 다른 경우에 대한 설명

1. **정적 위치 요소 (static)**:
   - 기본적으로 `position: static;`인 요소에서는 `top` 속성이 효력이 없습니다. 따라서, `top: 50%;`가 적용되지 않아서 중앙에 위치하지 않습니다.

2. **상대 위치 요소 (relative)**:
   - `position: relative;`일 경우 `top: 50%;`는 요소를 원래 위치에서 50% 아래로 이동시키므로, 중앙에 오지 않습니다.

3. **절대 위치 요소 (absolute)**:
   - `position: absolute;`인 경우, `top: 50%;`와 `transform: translateY(-50%);`를 사용하면 부모 요소의 중앙에 정확히 배치됩니다.

4. **고정 위치 요소 (fixed)**:
   - `position: fixed;`인 경우에도 같은 원리가 적용되어, 뷰포트의 중앙에 위치하게 됩니다.

### 결론
- 이 조합은 `position: absolute;` 또는 `position: fixed;`가 적용된 요소에서 가장 효과적입니다.

Transition

: 속성 값이 변할 때 더욱더 부드럽게 전환 할 수 있도록 도와준다

 

사용법 )

transition: <property> <duration>

.a-button{
	background-color: rgb(20,40,192);
	transition : background-color 3s;
 }
 
 a.button:hover{
 	opacity: 0.7;
    background-color: black;
   }

 

- 흔히 hover링 할 때 사용

- 호버 할때 백그라운드가 서서히 3초동안 검정으로 변함 

 

 

 transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;

 

-> 뒤에 0s는 몇초동안 딜레이시키고 transition(전환)  할 것인지 

 

 

 

 

 

!!MDN사이트에서 css 참고