transform

通过变形可以对元素进行平移，旋转，放大，缩小等操作

变形也不会影响布局，是一个相对安全的移动方式

transform-origin

指定变形的原点

  1. transform-position:center center;
  3. transform-position:left top;
  5. transform-position:10px 20px;

translateX()

沿x轴方向平移
可以使用百分比的值，这个值是相对于自己的宽度和高度计算

transform: translateX();

translateY()

沿y轴方向平移

transform: translateY();

translateZ()

沿z轴方向平移

transform: translateZ();

perspective

视距
设置人的眼睛和网页的距离
一般800-1000之间

那么z轴的移动，就是元素距离用户的距离

            html{
                perspective: 800px;
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <style type="text/css">
            html{
                perspective: 800px;
            }

            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
      .box2:hover{
          transform: translateZ(100px);
      }
        </style>
    </head>
    <body>
        <div class="box2">

        </div>
    </body>
</html>

rotateX（旋转）

沿x轴旋转
要想看出3D的效果，perspective一定要开

transform: rotateX(45deg);

transform-style

preserve-3d

设置变形时的3D效果

scale

scaleX()

            img:hover{
                transform: scaleX(2);
                transform: scaleY(2);
            }

这么写下面的会把上面的覆盖掉

要想x和y同时缩放只能通过

            img:hover{
                transform: scaleX(2) scale(2);
            }

或者通过

            img:hover{
                transform: scale(2);
            }

scaleY()

scaleZ()

scale3d()

案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            body{
                text-align: center;
            }
            img{
                transition: all 2s;
            }
            img:hover{
                transform: scaleX(2);
                transform: scaleY(2);
            }
        </style>
    </head>
    <body>
        <img src="image/1.jpg" alt="">
    </body>
</html>

skew

倾斜

transform: skew();
transform: skewX();
transform: skewY();

让一个大小不定的元素垂直水平双方向居中的方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;

            }
            .box2{
                position: absolute;
                background-color: yellow;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div class="box1">

        </div>
        <div class="box2">
            aaaaaaaaaaaaaaaaaaaaaaaa
        </div>
    </body>
</html>