18. 이미지 움직임2

    <style>
        img {
            width: 250px;
            /* height: 170px; 너비만 지정하면 비율이 자율 조정됨*/
            border: 1px solid black;
        }
        
        .trans1:hover {
            /* 그림에 마우스커서 대면 왼쪽으로 그림이동 */
            /* HTML5 표준을 지키는 브라우저 기본적인 스타일 */
            transform: translateX(100px);
            /* 크롬 계열*/
            -webkit-transform: translateX(100px);
            /* MS익스플로러 계열 */
            -ms-transform: translateX(100px);
        }
        
        .trans2:hover {
            /* 그림에 마우스커서 대면 아래로 이동 */
            transform: translateY(100px);
        }
        
        .trans3:hover {
            /* 그림에 마우스커서 대면 대각선위로올라갔다가 원상복귀 */
            transform: translate(-100px, -100px);
        }
        
        .trans4:hover {
            /* 그림에 마우스커서 대면 사진 가로로 늘어남 */
            transform: scaleX(2);
        }
        
        .trans5:hover {
            /* 그림에 마우스커서 대면 세로로 줄어듬 */
            transform: scaleY(0.5);
        }
        
        .trans6:hover {
            /* 그림에 마우스커서 대면 사진커짐 */
            transform: scale(3, 3);
        }
        
        .trans7:hover {
            /* 그림에 마우스커서 대면 대각선으로 돌아감 */
            transform: rotate(-45deg);
            transition: all 1s;
        }
        
        .trans7:active {
            transform: rotate(45deg);
            transition: all 1s;
        }
        
        .trans8:hover {
            /* 그림에 마우스커서 대면 대각선으로 늘어가서 돌아감 */
            transform: skewX(45deg);
        }
        
        .trans9:hover {
            /* 그림에 마우스커서 대면 대각선으로 늘어나서 돌아감 */
            transform: skewY(-45deg);
        }
        
        .trans10:hover {
            /* 그림에 마우스커서 대면 대각선으로 천천히 늘어나서 돌아감 */
            transform: skew(30deg, 30deg);
            transition: all 1s;
        }
    </style>

    <h3>1. translateX</h3>
    <img class="trans1" src="resources/image/flower2.PNG">
    <h3>2. translateY</h3>
    <img class="trans2" src="resources/image/flower2.PNG">
    <h3>3. translate</h3>
    <img class="trans3" src="resources/image/flower2.PNG">
    <h3>4. scaleX</h3>
    <img class="trans4" src="resources/image/flower2.PNG">
    <h3>5. scaleY</h3>
    <img class="trans5" src="resources/image/flower2.PNG">
    <h3>6. scale</h3>
    <img class="trans6" src="resources/image/flower2.PNG">
    <h3>7. rotate</h3>
    <img class="trans7" src="resources/image/flower2.PNG">
    <h3>8. skewX</h3>
    <img class="trans8" src="resources/image/flower2.PNG">
    <h3>9. skewY</h3>
    <img class="trans9" src="resources/image/flower2.PNG">
    <h3>10. skew</h3>
    <img class="trans10" src="resources/image/flower2.PNG">

</body>

1. translateX

2. translateY

3. translate

4. scaleX

5. scaleY

6. scale

7. rotate

8. skewX

9. skewY

10. skew