• Css3 2D转换 2D转换之移动tranlate

    转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

    转换你可以简单理解为变形。

    1. 移动：translate
    2. 旋转：rotate
    3. 缩放：scale

    2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

    2D转换之移动tranlate：

    2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

    语法：

    Transform:tranlate(x,y);或者分开写

    Tranform:tranlateX(n);

    Tranform:tranlateY(n);

    重点：

    1. 定义2D转换中的移动，沿着X和Y轴移动元素
    2. Translate最大的优点：不会影响到其他元素的位置
    3. Translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
    4. 对行内标签没有效果

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.  
    15.     <title>2D转换之translatetitle>
    16.  
    17.     <style>
    18.  
    19.         /* 移动盒子的位置：定位 盒子的外边距 2d转换移动 */
    20.  
    21.         div {
    22.  
    23.             width: 200px;
    24.  
    25.             height: 200px;
    26.  
    27.             background-color: pink;
    28.  
    29.             /* x就是x轴上移动的距离 y就是y轴上移动的位置 中间用逗号隔开 */
    30.  
    31.             /* transform: translate(x,y); */
    32.  
    33.             /* transform: translate(100px, 100px); */
    34.  
    35.         }
    36.  
    37.  
    38.  
    39.         div:first-child {
    40.  
    41.             transform: translate(30px, 30px);
    42.  
    43.         }
    44.  
    45.  
    46.  
    47.         div:last-child {
    48.  
    49.             background-color: aquamarine;
    50.  
    51.         }
    52.  
    53.     style>
    54.  
    55. head>
    56.  
    57.  
    58.  
    59. <body>
    60.  
    61.     <div>div>
    62.  
    63.     <div>div>
    64.  
    65. body>
    66.  
    67.  
    68.  
    69. html>

    通过translate实现水平垂直居中：

    1. html>
    2.  
    3. <html lang="en">
    4.  
    5.  
    6.  
    7. <head>
    8.  
    9.     <meta charset="UTF-8">
    10.  
    11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    12.  
    13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14.  
    15.     <title>Documenttitle>
    16.  
    17.     <style>
    18.  
    19.         * {
    20.  
    21.             margin: 0;
    22.  
    23.             padding: 0;
    24.  
    25.         }
    26.  
    27.  
    28.  
    29.         div {
    30.  
    31.             position: relative;
    32.  
    33.             width: 200px;
    34.  
    35.             height: 200px;
    36.  
    37.             background-color: aquamarine;
    38.  
    39.             /* 1 translate 里面的参数是可以用百分数的 */
    40.  
    41.             /* 2 如果里面的参数是% 移动的距离是盒子自身的宽度或高度来对比的 */
    42.  
    43.             /* transform: translate(50%); */
    44.  
    45.         }
    46.  
    47.  
    48.  
    49.         p {
    50.  
    51.             position: absolute;
    52.  
    53.             top: 50%;
    54.  
    55.             left: 50%;
    56.  
    57.             width: 30px;
    58.  
    59.             height: 30px;
    60.  
    61.             background-color: aqua;
    62.  
    63.             transform: translate(-50%, -50%);
    64.  
    65.         }
    66.  
    67.     style>
    68.  
    69. head>
    70.  
    71.  
    72.  
    73. <body>
    74.  
    75.     <div>
    76.  
    77.         <p>p>
    78.  
    79.     div>
    80.  
    81. body>
    82.  
    83.  
    84.  
    85. html>

  • 相关阅读:
    表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】
    java正则校验金额
    Docker 的基本概念和优势
    android 记录Activity和Fragment生命周期顺序
    【Python面向对象进阶⑥】——元类
    成功解决：OSError: [WinError 1455] 页面文件太小，无法完成操作。
    数据挖掘算法原理与实践：数据预处理
    树-层序遍历序列构造二叉树
    【我不熟悉的css】05. csc中使用变量，:root伪元素的应用
    Keyword2Text: 一种即插即用的可控文本生成方法
  • 原文地址：https://blog.csdn.net/m0_51495354/article/details/128064625