Homecss3 cube distortion
Page 1 of 1 • Share
- grimofdoom
Member
- Forum Posts : 106
Member Since : 2012-03-06
grimofdoom 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
- 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, 9:06 am; edited 2 times in total
- grimofdoomMember
- Forum Posts : 106
Member Since : 2012-03-06
grimofdoom 5/5/2012, 6:22 am
if i shorten the size, it looks like this:click here
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|