css3下可以實(shí)現(xiàn)3d的平移和旋轉(zhuǎn)，當(dāng)我將一個(gè)3d的小立方體平移到一個(gè)位置后，然后再讓它圍繞著一個(gè)軸旋轉(zhuǎn)，它又跑回原來(lái)的位置旋轉(zhuǎn)是怎么回事，這種問(wèn)題怎么解決？代碼如下，求大神調(diào)試！多謝了~<!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>
1 回答
我叫蛋黃派
TA貢獻(xiàn)11條經(jīng)驗(yàn) 獲得超2個(gè)贊
.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;
}
把這改下就行了，不懂的在線留言！
- 1 回答
- 0 關(guān)注
- 2021 瀏覽
添加回答
舉報(bào)
0/150
提交
取消