[기타] 돈다돈다 쑝돈다! 회전하는 히오스 로고

생각보다 많은 사람들이 요청해서 공유합니다.

마우스를 갖다 대면 회전하는 히오스 로고입니다.

-----------------------------------------------------------------------------

------------------------------------------------------------------------------

코드 (그대로 복사해서 사용하시면 됩니다.)

------------------------------------------------------------------------------

<img src="https://upload2.inven.co.kr/upload/2017/07/13/bbs/i15919338271.png" style="position:relative;left:75;top:0;width:300;height:300;z-index:10" data-inven-over-css="{'_SELF_':{'left':'-225','top':'-225','width':'900','height':'900','transform':'rotate3d(0,0,-1,60000deg)','transition':'20s','transition-timing-function':'cubic-bezier(0.2,0.01,0.6,0.11)'}}" data-inven-out-css="{'_SELF_':{'left':'75','top':'0','width':'300','height':'300','transform':'rotate3d(0,0,0,0deg)','transition':'3s'}}">

------------------------------------------------------------------------------

코드 설명

------------------------------------------------------------------------------

position:relative;left:75;top:0;  : 300*300 사이즈 이미지라서 중앙에 이미지를 표시하기 위함입니다.

z-index:10  : z-index 는 겹쳐진 개체들의 표시 우선순위를 나타내며, 숫자가 클 수록

                앞에 위치합니다. 포토샵의 레이어를 생각하면 편합니다. z-index를 지정하지

                않으면 기본값으로 1을 가집니다.

'transform'  : 개체를 변화시킵니다.

'rotate3d(0,0,-1,60000deg)'  : 개체를 3차원 방향으로 회전시킵니다.

                                     rotate3d(X축, Y축, Z축, 회전시킬 각도) 이며,

                                     X축, Y축, Z축의 값은 회전시킬 비율을 의미합니다.

                                     즉 rotate3d(0.1,0.2,0.3,360deg) == rotate3d(1,2,3,360deg)

'transition':'20s'  : 개체를 변화시키는 시간을 지정합니다. 지정하지 않으면 개체는 transform 된 상태로 표시됩니다.

'transition-timing-function'  : 개체를 변화시키는 속도를 지정합니다. 지정하지 않으면 기본값은 'ease' 입니다.

                                    'ease' 는 천천히 시작해서 빨라졌다가 다시 느려지고 천천히 끝납니다.

'cubic-bezier(0.2,0.01,0.6,0.11)'  : 설명이 어려우니 http://cubic-bezier.com/#0,0,1,1 이 사이트 참고.

------------------------------------------------------------------------------

응용

------------------------------------------------------------------------------

------------------------------------------------------------

두 히오스?