zoukankan      html  css  js  c++  java
  • css-2D变换-transform translate位移

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>位移</title>
      <style>
        /* 2D变换transform
        位移translate(水平,垂直):
            1.是根据自身的位置进行水平和垂直的站位移动
            2.水平:正值向右,负值向左;垂直:正值向下,负值向上
            3.不影响周围元素
            4.translateX() 和 translateY() 是单独控制横向和纵向
            5.可以实现元素水平垂直居中
        */
        * {
          margin: 0;
          padding: 0;
        }
    
        .box {
          width: 200px;
          height: 200px;
        }
    
        .box1 {
          background-color: skyblue;
          transform: translate(100px, 0px);
        }
    
        .box2 {
          position: absolute;
          top: 50%;
          left: 50%;
          background-color: orange;
          transform: translate(-50%,-50%);
        }
    
        .box3 {
          background-color: pink;
          transform: translateX(1000px);
        }
      </style>
    </head>
    
    <body>
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
    </body>
    
    </html>
  • 相关阅读:
    day69test
    day70test
    day71test
    ymfx
    day71
    day69
    day70
    day70test
    day65——day69
    c语言解决函数变参数问题 va_list
  • 原文地址:https://www.cnblogs.com/jia460/p/13789309.html
Copyright © 2011-2022 走看看