• 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>
  • 相关阅读:
    论 mysql 主键
    详解 hibernate 悲观锁 乐观锁 深入分析 代码实例
    Mysql 如何 删除大表
    JSP 不能用 不支持 STRUTS标签 报错 The Struts dispatcher cannot be found.
    struts2 防止重复提交 实例代码
    ECLIPSE MYECLIPSE 在线安装SVN
    powerdesigner中给一主键设为自增型auto_increment
    GDAL计算栅格图像统计值相关说明
    GDAL使用DEM数据计算坡度坡向
    到底什么是I/O Port,什么是Memorymapped I/O
  • 原文地址:https://www.cnblogs.com/liaoliao985786516/p/6547285.html
Copyright © 2020-2023  润新知