css3 cube distortion

View previous topic View next topic Go down

Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 5/5/2012, 6:04 am

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

<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 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;

<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>

Last edited by grimofdoom on 5/5/2012, 9:06 am; edited 2 times in total
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 5/5/2012, 6:22 am

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

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!

Create a new account

Log in

Already have an account? No problem, log in here.

Log in

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