如何让它自己一直旋转下去？？求解~
就是通过css来解决，不用鼠标移过去，然后它能一直旋转，最好敲下代码，谢啦~
2 回答
永久旋转~要鼠标放上去再旋转自己另加hover
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转正方体Demo</title>
<style type="text/css">
html,body,div,span,h1,h2,h3,h4,h5,h6,p a,img,ol,ul,li
{margin: 0;padding: 0;border: 0;outline: 0;}
.threed{
-moz-perspective:2000;
-moz-perspective-origin:50% 50%;
-webkit-perspective:2000;
-webkit-perspective-origin:50% 50%;
margin-top:100px;
}
.facegroup{
clear: both;
position:relative;
width:200px;
height:200px;
background-color:#FFF;
margin: 0 auto;
text-align: center;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transition:5s;
-webkit-transition:5s;
-moz-transform-origin:center center;
-webkit-transform-origin:center center;
animation:facegroup 5s infinite linear; <!--*******改的*******-->
}
@keyframes facegroup{ <!--*******改的*******-->
0{
transform:rotate3d(1, 1, 1,0deg);
}
100%{
transform:rotate3d(1, 1, 1,360deg);
}
}
.face{
width:170px;
background-color:rgba(0,0,225,.5);
color:white;
padding:14px;
font-size:170px;
position:absolute;
line-height: 170px;
border: 1px solid #fff;
}
#face1{
-moz-transform-origin:bottom;
-webkit-transform-origin:bottom;
}
#face2{
-moz-transform-origin:right;
-moz-transform:rotateY(90deg);
-webkit-transform-origin:right;
-webkit-transform:rotateY(90deg);
}
#face3{
-moz-transform-origin:bottom;
-moz-transform:translateZ(200px);
-webkit-transform-origin:bottom;
-webkit-transform:translateZ(200px);
}
#face4{
-moz-transform-origin:left;
-moz-transform:rotateY(-90deg);
-webkit-transform-origin:left;
-webkit-transform:rotateY(-90deg);
}
#face5{
-moz-transform-origin:top;
-moz-transform:rotateX(90deg);
-webkit-transform-origin:top;
-webkit-transform:rotateX(90deg);
}
#face6{
-moz-transform-origin: bottom;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="threed">
<div class="facegroup">
<div class="face" id="face1">1</div>
<div class="face" id="face2">2</div>
<div class="face" id="face3">3</div>
<div class="face" id="face4">4</div>
<div class="face" id="face5">5</div>
<div class="face" id="face6">6</div>
</div>
</div>
</body>
</html>
举报
0/150
提交
取消
