CSS3 2D转换

1.CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

一. translate(x,y) 或者translateX(x)或者translateY(y)

注意点：translateX(x)和translateY(y)大写X和Y；只写一个值，默认y=0。

   div{
        width: 200px;
        height: 200px;
        background: rgb(185, 24, 24);
        transition: all 1s;
    }
    div:hover {
        transform: translate(100px,100px);/* 只写一个值，默认y=0 */
    }
   
    一个作用：使定位的盒子居中对齐，代替原来的方法——嵌套的定位盒子如何居中？

    .father {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        position: relative;  
    }
    .son {
        width: 100px;
        height: 100px;
        background: rgb(133, 57, 57);
        position: absolute;
        /* 水平垂直居中 */
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);/* transform的位移是居于自身位置的移动，并且会保留位置，类似relative */
    }
    二、scale(x,y)或scaleX(x)或scaleY(y)

注意点：scaleX(x)和scaleY(y)大写X和Y；只写一个值，默认x=y。

   div{
        width: 200px;
        height: 200px;
        background: rgb(185, 24, 24);
        transition: all 1s;
    }
    div:hover {
        transform: scale(0.6);/* 只写一个值，x=y=0.6 */
    }
    示例：鼠标经过盒子，图片会动（被放大），效果如下：

复制代码 div{ width: 229px; height: 143px;/* 盒子和图片宽高相等 */ overflow: hidden;/* 等下图片放大，切掉超过部分 */ } img{ transition: all 0.3s;/* 添加一个过渡效果 */ } div:hover img{ transform: scale(1.1);/* 鼠标经过盒子时，里面的图片（宽高都）放大110% */ } 复制代码 三、rotate(angle)或rotateX(angle)或rotateY(angle)

注意：transform-origin 可以设置旋转点，默认是中心点 ；一定要跟度数deg。

   div{
        width: 200px;
        height: 200px;
        background: rgb(185, 24, 24);
        transform-origin: bottom right;/* 设置旋转点，默认是中心点 */
        transition: all 1s;
    }
    div:hover {
        transform: rotate(180deg);/* deg必须要写 */
    }


   ul {
        width: 220px;
        height: 220px;
        position: relative;
    }
    li{
        list-style: none;
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: left top;
        transition: all 1s;
    }
    ul:hover li:first-child{
        transform: rotate(60deg);
    }
    ul:hover li:nth-child(2){
        transform: rotate(120deg);
    }
    ul:hover li:nth-child(3){
        transform: rotate(180deg);
    }
    ul:hover li:nth-child(4){
        transform: rotate(240deg);
    }
    ul:hover li:nth-child(5){
        transform: rotate(300deg);
    }
    ul:hover li:last-child{
        transform: rotate(360deg);
    }    

四、skew(x-angle,y-angle)或者skewX(angle)或者skewY(angle)

注意：只写一个，y=0

div{ width: 200px; height: 200px; background: rgb(185, 24, 24); transition: all 1s; } div:hover { transform: skew(20deg,30deg);/* 只写一个，y=0 */ }

总结：1. transform 可以连写，但是连写的顺序会影响动画，它是按照一定顺序来的；

2. transform 经常与 过渡transition 一起连用，用来展示动画效果；

3.有2D 也有3D，3D就是利用有XYZ轴，后面的补上。