纯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.作者投稿可能会经我们编辑修改或补充。