Chatbox

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 css3 cube distortion on 5/5/2012, 8:04 am

grimofdoom

avatar

Member
i am using(code at bottom of what i have) a cube i found, but when i make the image as big as 300 px (x,y),it distorts(like places the side pices on the side on one turn and show the bottom on top for a seocnd another turn) it on the sides.can someone fix this please?seen here

Code:
<head>
<style type="text/css">

  #spinner div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 120px;
    font-size: 100px;
  }

  #spinner .face1 { -webkit-transform: translateZ(60px);width:300px;height:300px;      }
  #spinner .face2 { -webkit-transform: rotateY(90deg) translateZ(60px);  width:300px;height:300px;              }
  #spinner .face3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);width:300px;height:300px;  }
  #spinner .face4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);width:300px;height:300px; }
  #spinner .face5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);width:300px;height:300px; }
  #spinner .face6 { -webkit-transform: rotateX(-90deg) translateZ(60px); width:300px;height:300px;              }

</style>
<style type="text/css">

  @-webkit-keyframes spincube {
    from,to  {                                                    }
    16%      { -webkit-transform: rotateY(-90deg);                }
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    83%      { -webkit-transform: rotateX(90deg);                }
  }

  #spinner {position:absolute;left:45%;top:45%;
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 60px 60px 0;
  }
img{width:100%;height:100%;}

</style>
</head><body>
<div id="stage" style="width: 120px; height: 120px;">
<div id="spinner">
<div class="face1"><img src=http://games144.com/public/game/thumb/1278830414-funny-cats.jpg></div>
<div class="face2"><img src=http://games144.com/public/game/thumb/1278830414-funny-cats.jpg></div>
<div class="face3"><img src=http://games144.com/public/game/thumb/1278830414-funny-cats.jpg></div>
<div class="face4"><img src=http://games144.com/public/game/thumb/1278830414-funny-cats.jpg></div>
<div class="face5"><img src=http://games144.com/public/game/thumb/1278830414-funny-cats.jpg></div>
<div class="face6"><img src=http://games144.com/public/game/thumb/1278830414-funny-cats.jpg></div>
</div>
</div>
</body>



Last edited by grimofdoom on 5/5/2012, 11:06 am; edited 2 times in total

View user profile

2 Re: css3 cube distortion on 5/5/2012, 8:22 am

grimofdoom

avatar

Member
if i shorten the size, it looks like this:click here

View user profile

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum