zoukankan      html  css  js  c++  java
  • 纯CSS3实现旋转木马

    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);}
    }

    效果图:

    可以将颜色换成图片。

  • 相关阅读:
    Cocos2d-x 3.0 事件系统【转】
    cocos2d-x中false,setSwallowTouches,stopPropagation的区别
    类成员函数指针 ->*语法剖析
    cocos2d-lua 3.5 ios搭建步骤
    cocos2d-lua 3.5 android搭建步骤
    cocos2d-lua 3.5 android搭建常见错误
    结构体
    乒乓球(0)<P2003_1>
    不高兴的津津(0)<P2004_1>
    陶陶摘苹果(0)<P2005_1>
  • 原文地址:https://www.cnblogs.com/lalong/p/9692479.html
Copyright © 2011-2022 走看看