zoukankan      html  css  js  c++  java
  • css3 translate属性

    translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)默认都是从左上角开始移动

    这里的x,y为实际数字;

    x,y为百分数时,是相当于移动的元素的宽+padding,高+padding的百分比。例子如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style type="text/css">
     7     *{padding: 0;margin: 0;}
     8         .demo{
     9             width: 200px;
    10             height: 150px;
    11             background: #c66;
    12             color: #fff;
    13             padding-top: 50px;
    14             -webkit-transition:-webkit-transform 2s linear;
    15             -moz-transition:-moz-transform 2s linear;
    16             -ms-transition:-ms-transform 2s linear;
    17             -o-transition:-o-transform 2s linear;
    18             transition:transform 2s linear;
    19         }
    20         .demo:hover{
    21             -webkit-transform:-webkit-translate(100%,100%);
    22             -moz-transform:-moz-translate(100%,100%);
    23             -ms-transform:-ms-translate(100%,100%);
    24             -o-transform:-o-translate(100%,100%);
    25             transform:translate(100%,100%);
    26         }
    27     </style>
    28 </head>
    29 <body>
    30     <div class="demo">
    31         我想知道translate(100%,100%)是什么作用。
    32     </div>
    33 </body>
    34 </html>
    View Code
  • 相关阅读:
    Mysql的select加锁分析
    浅析Kubernetes的工作原理
    HTTP/2部署使用
    Amazon新一代云端关系数据库Aurora
    为什么 kubernetes 天然适合微服务
    深入解读Service Mesh背后的技术细节
    微服务的接入层设计与动静资源隔离
    Prim算法和Kruskal算法介绍
    DAG及拓扑排序
    BFS和DFS
  • 原文地址:https://www.cnblogs.com/MissBean/p/4250745.html
Copyright © 2011-2022 走看看