2D

2D

概念

俗称2D变换，指的是基于2D平面的角度，让标签元素发生变化。例如，让盒子移动、让盒子缩放、让盒子旋转。。。

平移

平移是让盒子在水平方向或垂直方向进行移动。

语法：

transform: translateX(像素值);
    /* 水平方向移动，正值向右，负值向左 */
transform: translateY(像素值); 
    /* 垂直方向移动，正值向下，负值向上 */
transform: translate(水平方向像素值, 垂直方向像素值); 
    /* 复合写法 */

缩放

缩放指让盒子可以缩放或放大一定的倍数。

语法：

transform:scaleX(横向放大倍数);
transform:scaleY(纵向放大倍数);
transform:scale(倍数);
        /*大于1的放大，小于1的缩小*/

旋转

旋转指让盒子绕着x轴或y轴进行旋转。

语法：

（单位 deg  --角度）
transform:rotateX(旋转的角度);
    /* 绕着x轴旋转多少角度*/
transform:rotateY(旋转的角度);
    /* 绕着y轴旋转多少角度*/
transform:rotate(旋转的角度);
    /* 绕着盒子中心点旋转多少角度*/   
    
transform-origin:x轴坐标 y轴坐标;
    /* 调整旋转的中心，可以使用像素值，可以使用关键字 */

backface-visibility:hidden;
    /* 设置旋转180度以后背面是否可见 */

案例

<style>
    .box{
        width: 150px;
        height: 200px;
        border: 1px solid #000;
        position: relative;
        /*相对定位*/
    }
    .box img{
        width: 150px;
        height: 200px;
        position:absolute;
        /* 绝对定位*/
        left: 0;
        top: 0;
    }
    .box img{
        backface-visibility: hidden;
        /* 超出隐藏*/
        
        transition: all 2s;
        /* 过渡 */
    }
    .box img:nth-child(2){
        transform: rotateY(180deg);
        /* 绕着Y轴水平旋转180度*/
    }
    .box:hover img:nth-child(1){
        transform: rotateY(180deg);
        /* 绕着Y轴水平旋转180度*/
        
        backface-visibility: hidden;
        /* 超出隐藏*/
    }
    .box:hover img:nth-child(2){
        transform: rotateY(0deg);
        /* 绕着Y轴水平旋转0度*/
    }
</style>
<div class="box">
    <img src="./back.png" alt="">
    <img src="./black13.png" alt="">
</div>