로고 하단에 회전 효과를주기 위해 상단 및 하단 섹션으로 분할해야했습니다.JQuery를 사용하여 클래스 추가 및 이미지 추가
주요 목표는 내 로고의 하단 톱날 부분을 가져 와서 회전 시키거나 마우스를 올려 놓는 것입니다.
로고를 회전/회전시킬 수 있지만 로고가 두 섹션으로 침투합니다. 상단 이미지가 하단 이미지를 차단하기 때문에 Z- 인덱스를 사용하여 이미지를 스택해야하며 하단 로고가 스핀되지 않습니다.
문제를 해결하기 위해 Jquery를 사용했지만 아직 코딩에 익숙하지 않았습니다.
누군가이 CodePen을보고 나를 도와 줄 수 있습니까? 당신이 회전하는 효과를 볼 수 있습니다 Z- 인덱스 리버스 경우 http://codepen.io/daugaard47/pen/yKrdD
: 여기
는 펜/코드에 대한 링크입니다.감사합니다. -Chris
깔끔한 디자인!
을 heres 작업 버전 http://codepen.io/patrickkettner/pen/byFIl
당신은 정말 가까웠다 - 단지 몇 개조하면 되겠 어. : hover listener를 래퍼에 추가하면 스태킹에 대해 걱정할 필요가 없습니다. 두 번째로 gpu 해킹 (translateZ을 사용)을 애니메이션 요소에 추가하여 요소로 점프하는 요소의 깜박임이 애니메이션으로 표시되도록하고 다시 CPU로 돌아가 휴식을 취하십시오 (체크보다 자세한 내용은 http://www.youtube.com/watch?v=8uAYE5G1gSs). 해당 주제에 대해 알아야 함).
정말 고마워요! 밤새 이걸 알아 내려고 했어. 정말 감사합니다. – cwd
에 비디오를 체크 아웃했습니다. 도대체 그들이 말하는 이야기의 1/3 정도는 이해하지만 (웃음), 그다지 흥미롭지는 않습니다. 다시 한번 감사드립니다. – cwd
@ Patrick 질문이 하나 더 있습니다. 주제가 바뀌 었다고 표시되지 않기를 바랍니다.하지만 .svg 파일의 경우 .png 파일을 만드는 데 어려움을 겪고 있습니다. 이 일에 대해 어떻게 생각하세요? 이미지에 대해 동일한 주소를 사용할 수 있습니다. .svg 대신 .png 확장자를 추가하십시오. – cwd
데모 바이올린을 만들 수 있습니까? –
컴퓨터에서 마우스를 가져 가지 않아도되지만 상단 이미지의 하단 절반을 투명하게 만들어보세요. – mplungjan