如何让它自己一直旋转下去？？求解~-慕课网

首页课程实战体系课手记专栏慕课教程

如何让它自己一直旋转下去？？求解~

来源：3-4 编程挑战

冷月诗魂

2016-06-13 11:43

就是通过css来解决，不用鼠标移过去，然后它能一直旋转，最好敲下代码，谢啦~

写回答关注

2回答

冷月诗魂

2016-06-17 22:54:23

永久旋转~要鼠标放上去再旋转自己另加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 0
幽灵家的秘密

2016-06-16 16:59:46

同不解~

1 0

冷月诗魂

额，已经会了，通过keyframes就行，，，，

2016-06-17 21:09:44

共 1 条回复 >

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78572 学习 · 425 问题

查看课程

相似问题

nextPage的旋转角度求解

回答 2

如何制作一个旋转的正方体

回答 3

关于旋转中心定位一直没懂

回答 4

怎么可以让正方体沿着中心旋转？

回答 3

旋转的问题

回答 1

打开慕课网App查看更多内容