多个transform 属性案例

Posted 2021-01-30 lujieting0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多个transform 属性案例相关的知识，希望对你有一定的参考价值。

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #31965b;
        }
        .box{
            width: 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" >
    <img src="images/img/shield_1_02.png" >
    <img src="images/img/shield_1_03.png" >
    <img src="images/img/shield_1_04.png" >
    <img src="images/img/shield_1_05.png" >
    <img src="images/img/shield_1_06.png" >
    <img src="images/img/shield_1_07.png" >
    <img src="images/img/shield_1_08.png" >
    <img src="images/img/shield_1_09.png" >
</div>

以上是关于多个transform 属性案例的主要内容，如果未能解决你的问题，请参考以下文章

Elasticsearch：计算多个状态更新的总持续时间 - transform 应用案例

保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记

12.CSS3的Transform详解

变形属性 transform

PT之Transformer：基于PyTorch框架利用Transformer算法针对IMDB数据集实现情感分类的应用案例代码解析