变形定义

变形就是指通过css来改变元素的形状或位置
变形不会影响到页面的布局

transform用来设置元素的变形效果

平移

translatex():沿着x轴方向平移
translateY(): 沿着y轴方向平移
translateZ():沿着z轴方向平移
平移元素
可以以px为单位
也可以以百分号为单位：百分比是相对于自身计算的
eg：

百分比是相对于自身计算——应用

使元素居中，
我们通常使用

margin: 0 auto;

但是使用该方法的前提是width是确定的，如果width不是确定的那应该如何居中，可以使用百分比是相对于自身计算的这个属性。

.box2{
            position: absolute;
            background-color: darkseagreen;
            left: 50%;
            transform:translateX(-50%);
        }

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: darksalmon;
            margin: 0px auto;
            margin-top: 200px;
/* 使用函数做参数 */
            transform:translateX(-50%);
        }
        .box2{
            position: absolute;
            background-color: darkseagreen;
            left: 50%;
            top: 50%;
            transform:translateX(-50%) translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">aaa</div>
    
</body>
</html>

在这里插入图片描述

平移特点

不会对其他元素位置造成影响，可能覆盖住，但是不会对位置产生影响，也不脱离文档流
一个元素只能有一个transrorm，所以后面定义的transform会完全覆盖前面定义的 transfrom

z轴平移

z轴平移，调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
z轴平移属于立体效果（近大远小)﹐默认情况下网页是不支持透视,如果需要看见效果
必须要设置网页的初始视距（给body设置）,视距即眼睛据网页的距离。
初始视距

       body{
            perspective: 800px;;
        }

eg：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            perspective: 800px;
        }
        body{
           width: 500px;
           height: 500px; 
           border: darkslateblue 2px solid;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color:darkseagreen;
            margin: 200px auto;
            transition: 1s;
        }
        body:hover .box1{
            transform:translateZ(200px);
        }

    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>