zoukankan      html  css  js  c++  java
  • 多个transform 属性案例

    <style>
    *{
    padding: 0;
    margin: 0;
    }
    body{
    background-color: #31965b;
    }
    .box{
    440px;
    margin:100px auto;
    }
    .box>img{
    transition: transform 1s;
    }
    .box>img:nth-of-type(1){
    transform:translate(100px,100px) rotate(30deg);
    }
    .box > img:nth-of-type(2){
    transform: translate(-100px,-100px) rotate(-30deg);
    }
    .box > img:nth-of-type(3){
    transform: translate(200px,200px) rotate(60deg);
    }
    .box > img:nth-of-type(4){
    transform: translate(-200px,-200px) rotate(-60deg);
    }
    .box > img:nth-of-type(5){
    transform: translate(150px,150px) rotate(90deg);
    }
    .box > img:nth-of-type(6){
    transform: translate(50px,150px) rotate(-90deg);
    }
    .box > img:nth-of-type(7){
    transform: translate(-150px,-150px) rotate(60deg);
    }
    .box > img:nth-of-type(8){
    transform: translate(10px,-250px) rotate(-90deg);
    }
    .box > img:nth-of-type(9){
    transform: translate(-250px,10px) rotate(45deg);
    }
    .box:hover>img{
    transform: none;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <img src="images/img/shield_1_01.png" alt="">
    <img src="images/img/shield_1_02.png" alt="">
    <img src="images/img/shield_1_03.png" alt="">
    <img src="images/img/shield_1_04.png" alt="">
    <img src="images/img/shield_1_05.png" alt="">
    <img src="images/img/shield_1_06.png" alt="">
    <img src="images/img/shield_1_07.png" alt="">
    <img src="images/img/shield_1_08.png" alt="">
    <img src="images/img/shield_1_09.png" alt="">
    </div>
  • 相关阅读:
    C 库函数 ------ qsort()
    递归之美
    C函数库 ------ ctype.h
    scanf 多行输入判断结束
    POSIX库、glibc库、pthreads库、libc库、newlib、uClibc
    Docker 私有仓库搭建
    在daemon.json中配置主机后无法启动docker
    MySQL配置HeartBeat实现心跳监控和浮动IP
    Heartbeat基础知识-运维小结
    (二) Docker中启动镜像
  • 原文地址:https://www.cnblogs.com/lujieting/p/10182620.html
Copyright © 2011-2022 走看看