• transform


    transform

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>transform</title>
     6     <style>
     7         div{width: 300px;height: 300px;border:1px solid #666;margin: 50px;float: left;}
     8         .sper{width: 100px;height: 100px;border: 1px solid red;display: block;}
     9         i{}
    10         em{width: 4px;height: 4px;background-color: #000;display: block;margin-left: 48px;margin-top: 48px;}
    11         /*rotate旋转*/
    12         .rotate1 .sper{transform:rotate(60deg);}
    13         .rotate2 .sper{transform:rotate(-60deg);}
    14         .rotate3 .sper{transform:rotate(60deg);transform-origin:150% 100%;}
    15         /*skew倾斜*/
    16         .skew1 .sper{transform:skew(60deg);}
    17         .skew2 .sper{transform:skew(-60deg);}
    18         .skew3 .sper{transform:skew(60deg);transform-origin:150% 100%;}
    19         /*scale倾斜*/
    20         .scale1 .sper{transform:scale(1.5);}
    21         .scale2 .sper{transform:scale(0.5);}
    22         .scale3 .sper{transform:scale(1.5);transform-origin:150% 100%;}
    23         /*translate变动,位移*/
    24         .translate1 .sper{transform:translate(0px,0px);}
    25         .translate2 .sper{transform:translate(60px,30px);}
    26         .translate3 .sper{transform:translate(0px,0px);transform-origin:150% 100%;}
    27     </style>
    28 </head>
    29 <body>
    30     <p>em为中心点,transform-origin:默认50% 50% 0</p>
    31     <div class='rotate1'><i>rotate</i><div class='sper'><em></em></div></div>
    32     <div class='rotate2'><i>rotate</i><div class='sper'><em></em></div></div>
    33     <div class='rotate3'><i>rotate</i><div class='sper'><em></em></div></div>
    34     
    35     <div class='skew1'><i>skew</i><div class='sper'><em></em></div></div>
    36     <div class='skew2'><i>skew</i><div class='sper'><em></em></div></div>
    37     <div class='skew3'><i>skew</i><div class='sper'><em></em></div></div>
    38 
    39     <div class='scale1'><i>scale</i><div class='sper'><em></em></div></div>
    40     <div class='scale2'><i>scale</i><div class='sper'><em></em></div></div>
    41     <div class='scale3'><i>scale</i><div class='sper'><em></em></div></div>
    42 
    43     <div class='translate1'><i>translate</i><div class='sper'><em></em></div></div>
    44     <div class='translate2'><i>translate</i><div class='sper'><em></em></div></div>
    45     <div class='translate3'><i>translate</i><div class='sper'><em></em></div></div>
    46 </body>
    47 </html>
  • 相关阅读:
    gdb高级技巧
    Fira Code字体安装与配置
    回归
    【Luogu】P2292 [HNOI2004]L语言 题解
    浅谈Linux桌面(发行版及桌面环境)
    剑指offer-和为S的连续正数序列-知识迁移能力-python
    剑指offer-数组中只出现一次的数字-数组-python
    剑指offer-数字在排序数组中出现的次数-数组-python
    剑指offer-数组中的逆序对-数组-python
    剑指offer-丑数-穷举-python
  • 原文地址:https://www.cnblogs.com/liaoliao985786516/p/6547285.html
Copyright © 2020-2023  润新知