IT虾米网

纯CSS3实现旋转木马详解

xmjava 2020年02月20日 编程语言 216 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);} 
}

效果图:

可以将颜色换成图片。

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

HTML5 + CSS3 实现地球绕太阳公转详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。