HTML5

객체 3d로 돌리기

먹세 2013. 4. 5. 10:48


간단하게 가로로 돌리기

<style type="text/css">


  #spinner div {

    position: absolute;

    width: 120px;

    height: 120px;

    border: 1px solid #ccc;

    background: rgba(255,255,255,0.8);

    text-align: center;

    line-height: 120px;

    font-size: 100px;

    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.2);

  }

  #spinner .face1 { border: 2px solid #0cc;-webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg); }

</style>


<style type="text/css">



  @-webkit-keyframes ani_face1 {

    from,to  {                                                    }

    00%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(0,0.3,0,0deg) }

    16%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(0,0.3,0,60deg) }

    33%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(0,0.3,0,120deg) }

    50%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(0,0.3,0,180deg) }

    66%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(0,0.3,0,240deg)}

    83%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(0,0.3,0,300deg)}

   100%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(0,0.3,0,360deg)}

  }


    #spinner  .face1 {

    -webkit-animation-name: ani_face1;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-duration:2s;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 60px 0px 0;

  }



</style>


<div id="stage" style="width:120px; height: 120px;">

<div id="spinner">

<div class="face1"></div>


</div>

</div>


=====================================================================================


박스형태의 객체를 3d로 굴리는 예제 (주사위처럼)

<style type="text/css">


  #spinner div {

    position: absolute;

    width: 120px;

    height: 120px;

    border: 1px solid #ccc;

    background: rgba(255,255,255,0.8);

    text-align: center;

    line-height: 120px;

    font-size: 100px;

    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.2);

  }

  #spinner .face1 { border: 2px solid #0cc;-webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg); }

  #spinner .face2 { border: 2px solid #c0c;-webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,00px,60px) rotate3d(0,0,0,180deg);}

  #spinner .face3 { border: 2px solid #cc0;-webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(-60px,00px,00px) rotate3d(0,-1,0,90deg); }

  #spinner .face4 { border: 2px solid #00c;-webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(+60px,00px,00px) rotate3d(0,01,0,90deg); }

  #spinner .face5 { border: 2px solid #0c0;-webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,-60px,00px) rotate3d(-1,00,0,90deg);}

  #spinner .face6 { border: 2px solid #c00;-webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,+60px,00px) rotate3d(01,00,0,90deg);}


</style>


<style type="text/css">



  @-webkit-keyframes ani_face1 {

    from,to  {                                                    }

    00%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg); }

    16%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,220deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg); }

    33%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,280deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg); }

    50%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,340deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg); }

    66%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,040deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg);}

    83%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,100deg) translate3d(00px,00px,-60px) rotate3d(0,0,0,0deg);}

  }

  @-webkit-keyframes ani_face2 {

    from,to  {                                                    }

    00%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,00px,60px) rotate3d(0,0,0,180deg); }

    16%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,220deg) translate3d(00px,00px,60px) rotate3d(0,0,0,180deg); }

    33%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,280deg) translate3d(00px,00px,60px) rotate3d(0,0,0,180deg); }

    50%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,340deg) translate3d(00px,00px,60px) rotate3d(0,0,0,180deg); }

    66%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,040deg) translate3d(00px,00px,60px) rotate3d(0,0,0,180deg);}

    83%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,100deg) translate3d(00px,00px,60px) rotate3d(0,0,0,180deg);}

  }

  @-webkit-keyframes ani_face3 {

    from,to  {                                                    }

    00%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(-60px,00px,000px) rotate3d(0,-1,0,90deg); }

    16%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,220deg) translate3d(-60px,00px,000px) rotate3d(0,-1,0,90deg); }

    33%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,280deg) translate3d(-60px,00px,000px) rotate3d(0,-1,0,90deg); }

    50%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,340deg) translate3d(-60px,00px,000px) rotate3d(0,-1,0,90deg); }

    66%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,040deg) translate3d(-60px,00px,000px) rotate3d(0,-1,0,90deg);}

    83%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,100deg) translate3d(-60px,00px,000px) rotate3d(0,-1,0,90deg);}

  }

  @-webkit-keyframes ani_face4 {

    from,to  {                                                    }

    00%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(60px,00px,000px) rotate3d(0,1,0,90deg); }

    16%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,220deg) translate3d(60px,00px,000px) rotate3d(0,1,0,90deg); }

    33%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,280deg) translate3d(60px,00px,000px) rotate3d(0,1,0,90deg); }

    50%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,340deg) translate3d(60px,00px,000px) rotate3d(0,1,0,90deg); }

    66%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,040deg) translate3d(60px,00px,000px) rotate3d(0,1,0,90deg);}

    83%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,100deg) translate3d(60px,00px,000px) rotate3d(0,1,0,90deg);}

  }

  @-webkit-keyframes ani_face5 {

    from,to  {                                                    }

    00%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,-60px,000px) rotate3d(-1,0,0,90deg); }

    16%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,220deg) translate3d(00px,-60px,000px) rotate3d(-1,0,0,90deg); }

    33%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,280deg) translate3d(00px,-60px,000px) rotate3d(-1,0,0,90deg); }

    50%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,340deg) translate3d(00px,-60px,000px) rotate3d(-1,0,0,90deg); }

    66%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,040deg) translate3d(00px,-60px,000px) rotate3d(-1,0,0,90deg);}

    83%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,100deg) translate3d(00px,-60px,000px) rotate3d(-1,0,0,90deg);}

  }

  @-webkit-keyframes ani_face6 {

    from,to  {                                                    }

    00%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,160deg) translate3d(00px,60px,000px) rotate3d(1,0,0,90deg); }

    16%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,220deg) translate3d(00px,60px,000px) rotate3d(1,0,0,90deg); }

    33%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,280deg) translate3d(00px,60px,000px) rotate3d(1,0,0,90deg); }

    50%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,340deg) translate3d(00px,60px,000px) rotate3d(1,0,0,90deg); }

    66%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,040deg) translate3d(00px,60px,000px) rotate3d(1,0,0,90deg);}

    83%      { -webkit-transform: translate3d(160px,160px,000px) rotate3d(1,0.3,0.1,100deg) translate3d(00px,60px,000px) rotate3d(1,0,0,90deg);}

  }



    #spinner  .face1 {

    -webkit-animation-name: ani_face1;

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-duration: 5s;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;

  }

    #spinner  .face2 {

    -webkit-animation-name: ani_face2;

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-duration: 5s;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;

  }

    #spinner  .face3 {

    -webkit-animation-name: ani_face3;

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-duration: 5s;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;

  }

    #spinner  .face4 {

    -webkit-animation-name: ani_face4;

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-duration: 5s;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;

  }

    #spinner  .face5 {

    -webkit-animation-name: ani_face5;

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-duration: 5s;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;

  }

    #spinner  .face6 {

    -webkit-animation-name: ani_face6;

    -webkit-animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-duration: 5s;

    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;

  }


</style>


<div id="stage" style="width: 120px; height: 120px;">

<div id="spinner">

<div class="face1">가</div>


<div class="face3">다</div>

<div class="face4">라</div>

<div class="face5">마</div>

<div class="face6">바</div>

<div class="face2">나</div>


</div>

</div>

반응형

'HTML5' 카테고리의 다른 글

페북 공유하기  (0) 2013.05.21
웹,모바일에서 사용가능한 스크래치 기능  (0) 2013.04.05
웹스토리지 예제  (0) 2013.04.05
스크롤시 이미지 고정  (0) 2013.04.05
HTML5 코딩을위한 기본설정  (0) 2013.04.04

'HTML5'의 다른글

  • 현재글객체 3d로 돌리기

관련글

댓글

티스토리툴바