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

    效果图:

    可以将颜色换成图片。

  • 相关阅读:
    swift基础语法(while循环语句)
    swift基础语法(if条件语句)
    swift基础语法(10-字典)
    swift基础语法(08-数组操作)
    swift基础语法(09-数组的其它操作)
    iOS--把网络获取图片进行不变形缩放
    CornerStone简单配置
    mac上搭建svn server
    iOS--利用比例纯代码适配屏幕大小
    iOS--当cell上显示不同数量图片的时候重用
  • 原文地址:https://www.cnblogs.com/lalong/p/9692479.html
Copyright © 2011-2022 走看看