[중앙정보처리학원] CSS* 전환, 변환

Transistion

<style>

    .box {
      width: 100px;
      height: 100px;
      background: red;
      margin: 50px;


      /* transition-property: all  */
      /* transition-duration: 5s; */
      /* transition-delay: 50ms; */
      /* transition-timing-function: linear; */

      transition: all 1s 50ms linear;

    }
    .box:hover {
      width: 300px;
      background: greenyellow;
      
    }
  </style>

 

 

 

 

이번 시간에는 transition 을 통해 요소를 시각적으로 움직이게 하는 방법을 배웠다.  

 

transition-property	전환 효과를 사용할 속성 이름	all
transition-duration	전환 효과의 지속시간 설정	0s = 1000ms
transition-timing-fuction	타이밍 함수 지정	ease
transition-delay	전환 효과의 대기시간 설정

 

 

 

Transfrom

 

<style>
    .box {
      width: 200px;
      height: 200px;
      background: orange;
      margin: 50px;
      font-size: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 1s;
    }

    .box1:hover {
      /* 회전 효과 */
      transform: rotate(-720deg);
    }

    .box2:hover {
      /* 이동 효과 */
      transform: translate(50px, 30px);
      /* position: relative;
      left: 50px;
      top: 30px; */
    }

    .box3:hover {
      /* 확대 축소 */
      transform: scale(0.7);
    }

    .box4:hover {
      /* 비틀기 효과 */
      transform: skew(10deg, 20deg);
    }
    .box5:hover {
      transform: rotate(360deg) 
      scale(1.2) translateX(100px);
    }
  </style>

 

hover 효과에 다양한 효과를 붙여낼 수 있다. 

 

 

.box {
  transform: rotate(20deg) translate(10px, 0);
 				  /* 20도 각도 회전,  X축:10px Y축:0 이동 */

 

transform-origin	요소 변환의 기준점을 설정
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3D 변환으로 회전된 요소의 뒷면 숨김을 설정