如何讓它自己一直旋轉(zhuǎn)下去？？求解~
就是通過(guò)css來(lái)解決，不用鼠標(biāo)移過(guò)去，然后它能一直旋轉(zhuǎn)，最好敲下代碼，謝啦~
冷月詩(shī)魂
2016-06-13
2 回答
舉報(bào)
0/150
提交
取消
2016-06-17
永久旋轉(zhuǎn)~要鼠標(biāo)放上去再旋轉(zhuǎn)自己另加hover
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>旋轉(zhuǎn)正方體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>
2016-06-16
同不解~