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

    效果图:

    可以将颜色换成图片。

  • 相关阅读:
    Linux安装cx_Oracle
    LVM分区
    命令行重启远程桌面服务
    常用Linux命令
    自动清理N天前的二进制日志
    MySQL常用操作
    Java里的堆(heap)栈(stack)和方法区(method)
    SpringMVC 八大注解
    Spring Cloud原理详解
    java线程的生命周期及五种基本状态
  • 原文地址:https://www.cnblogs.com/lalong/p/9692479.html
Copyright © 2011-2022 走看看