以下是网站=＆gt; http://waruna0sanjaya-001-site1.btempurl.com 放置在本页底部的动画框不是很好的动画。以下是到目前为止使用的html代码。
以下是代码：
@-webkit-keyframes spincube {
from,to {
-webkit-transform:rotateX(0) rotateY(0) rotateZ(0)
}
16% {
-webkit-transform:rotateY(-90deg)
}
33% {
-webkit-transform:rotateY(-90deg) rotateZ(90deg)
}
50% {
-webkit-transform:rotateY(-180deg) rotateZ(90deg)
}
66% {
-webkit-transform:rotateY(-270deg) rotateX(90deg)
}
83% {
-webkit-transform:rotateX(90deg)
}
}
@-moz-keyframes spincube {
from,to {
-moz-transform:rotateX(0) rotateY(0) rotateZ(0)
}
16% {
-moz-transform:rotateY(-90deg)
}
33% {
-moz-transform:rotateY(-90deg) rotateZ(90deg)
}
50% {
-moz-transform:rotateY(-180deg) rotateZ(90deg)
}
66% {
-moz-transform:rotateY(-270deg) rotateX(90deg)
}
83% {
-moz-transform:rotateX(90deg)
}
}
@-o-keyframes spincube {
from,to {
-o-transform:rotateX(0)rotateY(0)rotateZ(0)
}
16% {
-o-transform:rotateY(-90deg)
}
33% {
-o-transform:rotateY(-90deg)rotateZ(90deg)
}
50% {
-o-transform:rotateY(-180deg)rotateZ(90deg)
}
66% {
-o-transform:rotateY(-270deg)rotateX(90deg)
}
83% {
-o-transform:rotateX(90deg)
}
}
@keyframes spincube {
from,to {
-moz-transform:rotateX(0) rotateY(0) rotateZ(0);
-ms-transform:rotateX(0) rotateY(0) rotateZ(0);
transform:rotateX(0) rotateY(0) rotateZ(0)
}
16% {
-moz-transform:rotateY(-90deg);
-ms-transform:rotateY(-90deg);
transform:rotateY(-90deg)
}
33% {
-moz-transform:rotateY(-90deg) rotateZ(90deg);
-ms-transform:rotateY(-90deg) rotateZ(90deg);
transform:rotateY(-90deg) rotateZ(90deg)
}
50% {
-moz-transform:rotateY(-180deg) rotateZ(90deg);
-ms-transform:rotateY(-180deg) rotateZ(90deg);
transform:rotateY(-180deg) rotateZ(90deg)
}
66% {
-moz-transform:rotateY(-270deg) rotateX(90deg);
-ms-transform:rotateY(-270deg) rotateX(90deg);
transform:rotateY(-270deg) rotateX(90deg)
}
83% {
-moz-transform:rotateX(90deg);
-ms-transform:rotateX(90deg);
transform:rotateX(90deg)
}
}
.cubespinner {
-webkit-animation-name:spincube;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:12s;
-moz-animation-name:spincube;
-moz-animation-timing-function:ease-in-out;
-moz-animation-iteration-count:infinite;
-moz-animation-duration:12s;
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:60px 60px 0;
-moz-transform-origin:60px 60px 0;
-ms-transform-origin:60px 60px 0;
transform-origin:60px 60px 0
}
.cubespinner div {
position:absolute;
width:120px;
height:120px;
border:1px solid #ccc;
background:rgba(255,255,255,.8);
box-shadow:inset 0 0 20px rgba(0,0,0,.2);
text-align:center;
font-size:100px
}
.cubespinner .face1 {
-webkit-transform:translateZ(60px);
-moz-transform:translateZ(60px);
-ms-transform:translateZ(60px);
-o-transform:translateZ(60px);
transform:translateZ(60px)
}
.cubespinner .face2 {
-webkit-transform:rotateY(90deg) translateZ(60px);
-moz-transform:rotateY(90deg) translateZ(60px);
-ms-transform:rotateY(90deg) translateZ(60px);
transform:rotateY(90deg) translateZ(60px);
-o-transform:rotateY(90deg) translateZ(60px)
}
.cubespinner .face3 {
-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
-moz-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
-o-transform:rotateY(90deg) rotateX(90deg) translateZ(60px)
}
.cubespinner .face4 {
-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
-moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
-o-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px)
}
.cubespinner .face5 {
-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-o-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px)
}
.cubespinner .face6 {
-webkit-transform:rotateX(-90deg) translateZ(60px);
-moz-transform:rotateX(-90deg) translateZ(60px);
-ms-transform:rotateX(-90deg) translateZ(60px);
transform:rotateX(-90deg) translateZ(60px);
-o-transform:rotateX(-90deg) translateZ(60px)
}
div.stage img {
vertical-align:inherit
}<div class="stage wow zoomInLeft animated" data-wow-duration="1000ms" data-wow-delay="300ms" style="width: 120px; height: 120px; margin-top: 10%; margin-bottom: 10%; visibility: visible; animation-duration: 1000ms; animation-delay: 300ms; animation-name: zoomInLeft;">
<div class="cubespinner">
<div class="face1"><img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"></div>
<div class="face2"><img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"></div>
<div class="face3"><img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"></div>
<div class="face4"><img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"></div>
<div class="face5"><img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"></div>
<div class="face6"><img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"></div>
</div>
</div>