css3中的3d立方块先平移后旋转，达不到预期效果
css3下可以实现3d的平移和旋转，当我将一个3d的小立方体平移到一个位置后，然后再让它围绕着一个轴旋转，它又跑回原来的位置旋转是怎么回事，这种问题怎么解决？代码如下，求大神调试！多谢了~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
border:0px;
}
body{
-webkit-transform-style:preserve-3d;
-webkit-perspective:2400px;
transform-style:preserve-3d;
perspective:2400px;
}
.cube{
-webkit-transform-style:preserve-3d;
-webkit-perspective:3000px;
transform-style:preserve-3d;
perspective:3000px;
-webkit-transform:rotateX(-25deg) rotateY(45deg);
transform:rotateX(-25deg) rotateY(45deg);
margin:180px;
width:240px;
height:240px;
}
.cube .small{
width:120px;
height:120px;
float:left;
-webkit-transform-style:preserve-3d;
-webkit-perspective:3000px;
transform-style:preserve-3d;
perspective:3000px;
-webkit-transition:transform 1s ease .1s;
transition:transform 5s ease .1s;
}
.cube div div{
width:116px;
height:116px;
margin:1px;
border-radius:10px;
box-shadow:0px 0px 10px #000 inset;
position:absolute;
opacity:0.9;
}
.cube01{
-webkit-transform-origin:0px 60px 60px;
transform-origin:0px 60px 60px;
-webkit-animation:cube 5s ease .1s infinite;
animation:cube 5s ease .1s infinite;
}
.cube02{
-webkit-transform:translateZ(116px) translateY(-120px);
transform:translateZ(116px) translateY(-120px);
-webkit-transform-origin:0px 60px 60px;
transform-origin:0px 60px 60px;
/*-webkit-animation:cube 5s ease .1s infinite;*/
/*animation:cube 5s ease .1s infinite;*/
}
.top{
transform:rotateX(90deg) translateZ(60px) ;
}
.up{
transform:rotateX(-90deg) translateZ(60px);
}
.left{
transform:rotateY(-90deg) translateZ(60px);
}
.right{
transform:rotateY(90deg) translateZ(60px);
}
.before{
transform:translateZ(60px);
}
.back{
transform:rotateY(180deg) translateZ(60px);
}
@-webkit-keyframes cube{
0%{
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
100%{
-webkit-transform:rotateY(360deg);
transform:rotateY(360deg);
}
}
@keyframes cube{
0%{
-webkit-transform:rotateY(45deg);
transform:rotateY(45deg);
}
100%{
-webkit-transform:rotateY(315deg);
transform:rotateY(315deg);
}
}
</style>
</head>
<body>
<div>
<div class="cube01 small">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="cube02 small">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
慕娘5227020浏览 1979回答 1
1回答
-
我叫蛋黄派
.cube01 { margin-left: 500px; border:1px solid red; -webkit-transform-origin: 0px 60px 0px; transform-origin: 0px 60px 0px; -webkit-animation: cube 5s linear .1s infinite; animation: cube 5s linear .1s infinite;}把这改下就行了，不懂的在线留言！
随时随地看视频慕课网APP
相关分类
CSS3