zoukankan      html  css  js  c++  java
  • html5css练习 旋转

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>旋转菜单</title>
        <link rel="stylesheet" href="style7.css" type="text/css">
    </head>
    <body>
    <div>
    <img src="pic/sc17.png" alt="">
    </div>
    </body>
    </html>

    *{
        margin: 0;
        padding: 0;
    }
    img{
         150px;
        height: 210px;
        border: 3px groove orange;
    }
    div{
        margin-left: auto;
        margin-right: auto;
         150px;
        margin-top: 50px;
        animation: fz 6s infinite ease;
    }
    body{
        perspective:500px;
    }
    @keyframes fz{
        0%{
            transform: rotateX(45deg);

        }
        20%{
            transform: rotateX(180deg);
        }
        40%{
            transform: rotateX(360deg);
        }
            60%{
            transform: rotateY(45deg);

        }
        80%{
            transform: rotateY(180deg);
        }

        90%{
            transform: rotateY(360deg);
        }

        100%{
            transform: rotateY(360deg);
        }
    }
    }

    天道酬勤,厚积薄发。 君子之行,静以修身,俭以养德。 非淡泊无以明志,非宁静无以致远。 如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。
  • 相关阅读:
    mysql导出某张表的部分数据
    linux命令行实用快捷键
    mysql导出数据库某些表的数据
    二进制日志过期时间设置expire_logs_days
    进程信息
    安装mysql-workbench
    create user
    系统io统计
    mysqldump与mydumper
    系统负载监控
  • 原文地址:https://www.cnblogs.com/houweidong/p/9752542.html
Copyright © 2011-2022 走看看