css-2D变换-transform位移

2020-12-30 03:27

阅读：468

标签：viewport doctype bsp type name style rgba idt initial

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>

标签：viewport doctype bsp type name style rgba idt initial

原文地址：https://www.cnblogs.com/jia460/p/13789309.html

上一篇：html css的冷门相关基础知识整理

下一篇：Kubernetes YAML文件详解

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css-2D变换-transform位移
文章链接：http://soscw.com/index.php/essay/39191.html

亲，登录后才可以留言！

css-2D变换-transform位移

评论

热门文章

推荐文章

最新文章

置顶文章