jquery 또는 자바 스크립트에서 회전 이미지를 어떻게 만들 수 있습니까?

Question

http://www.lynda.com/

lynda.com 웹 페이지에 나열된 항목 중 하나를 마우스가 가리키면 이미지가 회전합니다.

jquery 또는 javascript에서이 상호 작용을 어떻게 만들 수 있습니까? 브라우저의 Inspect 요소에서 스크립트 소스 코드를 볼 수있는 방법이 있습니까?

는

Answer 1

찾아 모질라 파이어 폭스를 사용하고 추가 기능 방화 광을 설치, 감사합니다.

이를 통해 페이지의 각 요소를 검사 할 수 있습니다. 또한 페이지에서 스크립트, 스타일을 볼 수 있습니다.

Answer 2

JSBIN

를 사용하여 순수 CSS는 더 적절하다.

.content{ 
    position: relative; 
    width: 500px; 
    height: 500px; 

    text-align: center; 
    line-height: 500px; 
    font-size:100px; 
} 
.first,.second{ 
    position: absolute; 
    left: 0;top: 0; 
    width: 100%; 
    height: 100%; 
    transition: all 1s; 
    background: #fec; 
} 
.second{ 
    transform:scale(-1,1); 
    z-index: -1; 
} 
.content:hover .first{ 
    transform:scale(-1,1); 
} 
.content:hover .second{ 
    transform:scale(1,1); 
    z-index: 0; 
}