animation：用于设置六个动画属性 1.animation-name 规定需要绑定到选择器的 keyframe 名称。。 2.animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 3.animation-timing-function 规定动画的速度曲线。 4.animation-delay 规定在动画开始之前的延迟。 5.animation-iteration-count 规定动画应该播放的次数。 6.animation-direction 规定是否应该轮流反向播放动画。 html代码： <html> <head></head> <body> <div id="logos"> <div id="cube" href="#"> <img src="${rt}/Others/test/imgs/mdnface.webp" id="front" alt="MDN" /> <img src="${rt}/Others/test/imgs/htmlface.webp" id="back" alt="HTML5" /> <span id="xaxis">x轴</span> <!-- x轴 --> <span id="yaxis">y轴</span> <!-- y轴 --> <span id="zaxis">z轴</span> <!-- z轴 --> </div> </div> </body> </html> css代码 #logos { position: relative; margin: 0 auto; -webkit-perspective: 822px; perspective: 822px; } #cube { display: block; position: relative; margin: 30px auto; height: 200px; width: 200px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(-5deg) translateX(8px); transform-style: preserve-3d; transform: rotateX(-5deg) translateX(8px); } #front { position: absolute; height: 200px; width: 200px; -webkit-backface-visibility: visible; -webkit-transform: translateZ(100px); backface-visibility: visible; transform: translateZ(100px); } #back { position: absolute; height: 200px; width: 200px; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-transform: rotateY(180deg) translateZ(100px); transform: rotateY(180deg) translateZ(100px); } #cube { -webkit-animation: rotateGif 5s infinite linear; animation: rotateGif 5s infinite linear; } @-webkit-keyframes rotateGif { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); } } @keyframes rotateGif { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } #xaxis { -moz-transform-style: preserve-3d; -moz-transform: translate3d(-100px,0,0); -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-100px,0,0); -ms-transform-style: preserve-3d; -ms-transform: translate3d(-100px,0,0); -o-transform-style: preserve-3d; -o-transform: translate3d(-100px,0,0); transform-style: preserve-3d; transform: translate3d(-100px,0,0); border-bottom: black 1px solid; color: blue; width: 400px; display: block; position: absolute; top: 100px; height: 1px; } #yaxis { -moz-transform-style: preserve-3d; -moz-transform: rotateZ(-90deg) translate3d(0,-100px,0); -webkit-transform-style: preserve-3d; -webkit-transform: rotateZ(-90deg) translate3d(0,-100px,0); -ms-transform-style: preserve-3d; -ms-transform: rotateZ(-90deg) translate3d(0,-100px,0); -o-transform-style: preserve-3d; -o-transform: rotateZ(-90deg) translate3d(0,-100px,0); transform-style: preserve-3d; transform: rotateZ(-90deg) translate3d(0,-100px,0); border-bottom: green 1px solid; color: green; width: 400px; display: block; position: absolute; top: 100px; height: 1px; } #zaxis { -moz-transform-style: preserve-3d; -moz-transform: rotateY(90deg) translate3d(0,0,-100px); -ms-transform-style: preserve-3d; -ms-transform: rotateY(90deg) translate3d(0,0,-100px); -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(90deg) translate3d(0,0,-100px); -o-transform-style: preserve-3d; -o-transform: rotateY(90deg) translate3d(0,0,-100px); transform-style: preserve-3d; transform: rotateY(90deg) translate3d(0,0,-100px); border-bottom: red 1px solid; color: red; width: 400px; display: block; position: absolute; top: 100px; height: 1px; } |
