 Lua2017-07-28 22:20
조회: 14,490
추천: 4
돈다돈다 쑝돈다! 회전하는 히오스 로고생각보다 많은 사람들이 요청해서 공유합니다.
마우스를 갖다 대면 회전하는 히오스 로고입니다. -----------------------------------------------------------------------------  ------------------------------------------------------------------------------ 코드 (그대로 복사해서 사용하시면 됩니다.) ------------------------------------------------------------------------------ <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 이 사이트 참고. ------------------------------------------------------------------------------ 응용 ------------------------------------------------------------------------------ ------------------------------------------------------------ 두 히오스? |
Lua 
