梳理CSS3 Transform相关知识

transform的本意就是变换、使...变形的意思，在CSS3中transform属性其实就是用于设置元素某些属性的变换，比如放大缩小、平移、旋转等等。
CSS3中新增与变换相关的属性如下：

首先来看transform属性，其对应属性值较多，整理如下图

transform:none表示无变换
关于2d变换的方法：
transform:translate()表示平移
可以传递两个参数，也可以传递一个参数
传递两个参数，第一个参数表示水平平移，第二个表示垂直方向平移量，可以为负值。
传递一个参数时表示：水平方向平移量，垂直方向不偏移即为0

<head>
    <style>
        body{
            background-color: #eee;
        }
        section{            
            width: 650px;
            height: 550px;          
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .wrapper {
            width: 250px;
            height: 100px;
            background-color: #bbb;                     
            transition: all 2s;
            border: 1px solid deeppink;
        }
        .wrapper div{
            width: 250px;
            height: 100px;
            text-align:center;
            line-height: 100px;
            font-size: .8em;
            font-weight: bold;
            background-color: pink;             
        }
        .wrapper:nth-of-type(1) div{
            transform:translate(50px,50px)
        }
        .wrapper:nth-of-type(2) div{
            transform:translate(50px)
        }
        .wrapper:nth-of-type(3) div{
            transform:translate(50%,50%)
        }
        .wrapper:nth-of-type(4) div{
            transform:translate(50%)
        }
        .wrapper:nth-of-type(5) div{
            transform:translate(-10px,-10px)
        }
        .wrapper:nth-of-type(6) div{
            transform:translate(-10px)
        }
    </style>
</head>
<body>
    <section>
        <div class="wrapper">
            <div>transform:translate(50px,50px)</div>
        </div>
        <div class="wrapper">
            <div>transform:translate(50px)</div>
        </div>
        <div class="wrapper">
            <div>transform:translate(50%,50%)</div>
        </div>
        <div class="wrapper">
            <div>transform:translate(50%)</div>
        </div>
        <div class="wrapper">
            <div>transform:translate(-10px -10px)</div>
        </div>
        <div class="wrapper">
            <div>transform:translate(-10px)</div>
        </div>
    </section>
</body>

结果

transform:translateX()表示单独平移水平方向
transform:translateY()表示单独平移垂直方向

.wrapper:nth-of-type(1) div{
    transform:translateX(50px)
}
.wrapper:nth-of-type(2) div{
    transform:translateY(50px)
}

结果

transform:rotate()表示旋转度数
可以是负值

        .wrapper:nth-of-type(1) div{
            transform:rotate(30deg)
        }
        .wrapper:nth-of-type(2) div{
            transform:rotate(90deg)
        }
        .wrapper:nth-of-type(3) div{
            transform:rotate(-30deg)
        }
        .wrapper:nth-of-type(4) div{
            transform:rotate(-90deg)
        }

结果

transform:scale()表示缩放比例
可以传递两个参数，也可以传递一个参数
两个参数时分别表示水平方向的缩放比例、垂直方向缩放比例
如果只传递了一个参数，第二个参数等比缩放
当设置两个值一样时，相当于设置一个值

<head>
    <style>
        body{
            background-color: #eee;
        }
        section{        
            margin-top: 100px;  
            width: 650px;
            height: 400px;          
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .wrapper {
            width: 250px;
            height: 100px;
            background-color: #bbb;                     
            transition: all 2s;
            border: 1px solid deeppink;
        }
        .wrapper div{
            width: 250px;
            height: 100px;
            text-align:center;
            line-height: 100px;
            font-size: .8em;
            font-weight: bold;
            background-color: pink;             
        }
        .wrapper:nth-of-type(1) div{
            transform:scale(.8,.8)
        }
        .wrapper:nth-of-type(2) div{
            transform:scale(.8)
        }
        .wrapper:nth-of-type(3) div{
            transform:scale(1.2,1.2)
        }
        .wrapper:nth-of-type(4) div{
            transform:scale(1.2)
        }
    </style>
</head>
<body>
    <section>
        <div class="wrapper">
            <div>transform:scale(.8,.8)</div>
        </div>
        <div class="wrapper">
            <div>transform:scale(.8)</div>
        </div>
        <div class="wrapper">
            <div>transform:scale(1.2,1.2)</div>
        </div>
        <div class="wrapper">
            <div>transform:scale(1.2)</div>
        </div>
    </section>
</body>

结果

transform:skew()表示斜切扭曲
可以传递两个值或一个值
两个值分别表示水平扭曲度数、垂直扭曲度数
如果一个值则表示水平扭曲，垂直方向不扭曲
transform:skewX()表示单独设置水平扭曲
transform:skewY()表示单独设置垂直扭曲

.wrapper:nth-of-type(1) div{
    transform:skewX(10deg)
}
.wrapper:nth-of-type(2) div{
    transform:skewX(10deg)
}
.wrapper:nth-of-type(3) div{
    transform:skewY(20deg)
}
.wrapper:nth-of-type(4) div{
    transform:skewY(20deg)
}

结果

matrix()指定了一个由指定的6个值组成的 2D 变换矩阵。比较少用

下面是3d变换相关的属性函数

transform:translate3d()
必须设置3个值，分别是X轴平移量、Y轴平移量和Z轴方向的平移量
transform: translateZ()表示单独设置在z轴上的平移
transform: rotate3d()表示3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
transform: rotateX()表示在x轴的旋转角度
transform: rotateY()表示在y轴的旋转角度
transform: rotateZ()表示在z轴的旋转角度

.wrapper:nth-of-type(1) div{
    transform:rotateX(30deg)
}
.wrapper:nth-of-type(2) div{
    transform:rotateX(-30deg)
}
.wrapper:nth-of-type(3) div{
    transform:rotateY(30deg)
}
.wrapper:nth-of-type(4) div{
    transform:rotateY(-30deg)
}
.wrapper:nth-of-type(5) div{
    transform:rotateZ(30deg)
}
.wrapper:nth-of-type(6) div{
    transform:rotateZ(-30deg)
}

transform: scale3d()表示3d缩放，接收三个参数分别对应x，y，z轴的缩放比例系数
transform: scaleZ()表示设置z轴方向上的缩放系数

.wrapper:nth-of-type(1) div{
    transform:scale3d(.8,.8,.8)
}

transform: perspective()表示景深
在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深），景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好。所以应用景深的元素称为“舞台元素”

注意：默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略

transform-origin属性用于设置以某个原点进行转换
可以传递两个或者一个参数
如果提供两个时，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
取值可以是：
%
<length>
left
center
right
top
center
bottom
transform-style属性用于指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
取值：
flat：指定子元素位于此元素所在平面内
preserve-3d：指定子元素定位在三维空间内
perspective：none | <length>
设置在父元素上，对后代元素其作用（在子元素中也可以使用transform: perspective()这种写法）
指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。
perspective-origin
同perspective属性，也是设置在父元素上，对后代元素起作用。这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的
backface-visibility表示背面面向用户时是否可见
visible：指定元素背面可见，允许显示正面的镜像。
hidden：指定元素背面不可见