ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSS Transform 2D / 3D
    개발자를 위한 html css js TIP 2019. 6. 2. 16:00

    실무에서 필요한 내용 위주의 '개발자를 위한 html/css/js' 시리즈입니다.

    사내 강좌로 진행 했던 내용을 편집하여 연재할 예정입니다.

     

    CSS Transform 은 부모 element의 영향을 받지 않고, 독자적으로 element 의 위치 및 확대/축소 회전이 가능한 CSS 요소입니다.

    Transform 3D의 요소로 지정되면 브라우져에서 GPU를 사용하며,

    CSS 애니메이션 효과인 transition 과 animation 을 사용할때 성능과 자연스러움을 기대 할 수 있습니다.

     

    1) Transform 2D

    • 위치이동 - translate(가로, 세로)
    • 회전 - rotate(각도deg), rotate(가로축deg,세로축deg)
    • 크기 - scale(배수)
    <style type="text/css">
    .sample-area .sample .button:hover {
        transform: translate(0,2px);
        box-shadow: none;
    }
    .sample-area .sample .btn_close:hover {
        transform: rotate(135deg);
    }
    .sample-area .sample .image:hover > img {
        transform: scale(1.4);
    }
    </style>

    * 요소에 마우스를 올려 변화를 확인하세요.(모바일은 요소 터치)

    translate

    버튼

    rotate

     

    scale

    2) Transform 3D

    • ransform-style: preserve-3d;
    • 위치이동 - translate3D(가로, 세로, z축) or translateZ(Z축)
    • 회전 - rotateZ(Z축)
    • 크기 - scaleZ(배수)
    <style type="text/css">
    .sample-area .sample .zsample.translateX:hover .zsample-child {
        transform: translateX(40px); /* X축 이동 */
    }
    .sample-area .sample .zsample.translateY:hover .zsample-child {
        transform: translateY(40px); /* Y축 이동 */
    }
    .sample-area .sample .zsample.translateZ:hover .zsample-child {
        transform: translateZ(40px); /* Z축 이동 */
    }
    .sample-area .sample .zsample.rotateX:hover .zsample-child {
        transform: rotateX(100deg); /* X축 회전 */
    }
    .sample-area .sample .zsample.rotateY:hover .zsample-child {
        transform: rotateY(100deg); /* Y축 회전 */
    }
    .sample-area .sample .zsample.rotateZ:hover .zsample-child {
        transform: rotateZ(100deg); /* Z축 회전 */
    }
    .sample-area .sample .zsample.rotateZ:hover .zsample-child {
        transform: rotate3d(1,1,1,100deg); /* X,Y,Z축 회전 */
    }
    .sample-area .sample .zsample.scaleZ:hover {
        transform: rotate3d(0,1,0,45deg) scaleZ(1.5);
    }
    </style>

    * 요소에 마우스를 올려 변화를 확인하세요.(모바일은 요소 터치)

    translateX

     

    translateY

     

    translateZ

     

    rotateX

     

    rotateY

     

    rotateZ

     

    scaleZ

    1
    2
    3
    4

    3) Transform TIP

    일반 적인 태그는 % 사용시 부모 사이즈 기준으로 적용되나,
    Transform의 translate / translate3D 에서 top, left % 는 자신의 element 사이즈 기준으로 적용됨

    • 활용 ex) 크기가 가변적인 모달창을 중앙 정렬 하는 경우
    <style type="text/css">
    .modal{
      margin-top:50%;	/* 부모 element 기준으로 높이 50% 만큼 내린 후 */
      transform:translateY(-50%);		/* 현재 element 크기의 50% 만큼 위로 올림 */
    }
    </style>

    댓글 0

Designed by Tistory.