纯CSS3实现旋转木马

java哥 阅读:914 2020-02-20 18:53:42 评论:0

test.html:

<!DOCTYPE html>  
<html>  
<head> 
<meta charset="utf-8" /> <title>CSS3旋转木马</title> <link type="text/css" rel='stylesheet' href="test.css"></link> </head> <body> <div class="box"> <div class="stage"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>

test.css:

*{ 
    margin: 0; 
    padding: 0; 
} 
.box{ 
    margin: 100px auto; 
    perspective: 1000px; 
} 
.stage{ 
    margin: 0 auto; 
    background: whitesmoke; 
    position: relative; 
    width: 200px; 
    height: 100px; 
    transform: rotateX(-8deg); 
    transform-style: preserve-3d; 
    animation: rot linear 6s infinite; 
} 
.stage div{ 
    position: absolute; 
    width: 200px; 
    height: 100px; 
} 
.stage div:nth-child(1){ 
    background-color: red; 
    transform: rotateY(0deg) translateZ(350px); 
} 
.stage div:nth-child(2){ 
    background-color: orange; 
    transform: rotateY(60deg) translateZ(350px); 
} 
.stage div:nth-child(3){ 
    background-color: yellow; 
    transform: rotateY(120deg) translateZ(350px); 
} 
.stage div:nth-child(4){ 
    background-color: green; 
    transform: rotateY(180deg) translateZ(350px); 
} 
.stage div:nth-child(5){ 
    background-color: blue; 
    transform: rotateY(240deg) translateZ(350px); 
} 
.stage div:nth-child(6){ 
    background-color: blueviolet; 
    transform: rotateY(300deg) translateZ(350px); 
} 
.stage div:nth-child(7){ 
    background-color: blanchedalmond; 
    transform: rotateY(90deg); 
} 
@keyframes rot{ 
    from{transform: rotateX(-8deg) rotateY(0deg);} 
    to{transform: rotateX(-8deg) rotateY(-360deg);} 
}

效果图:

可以将颜色换成图片。

 

标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号