CSS - 2D变形 + 过渡 - 标签

translate() 移动

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

    div {
        transform: translate(50px,100px);
        -ms-transform: translate(50px,100px);       /* IE 9 */
        -webkit-transform: translate(50px,100px);   /* Safari and Chrome */
        -o-transform: translate(50px,100px);        /* Opera */
        -moz-transform: translate(50px,100px);      /* Firefox */
    }}

---

rotate() 旋转

值 rotate(30deg) 把元素顺时针旋转 30 度。

    div {
        transform: rotate(30deg);
        -ms-transform: rotate(30deg);       /* IE 9 */
        -webkit-transform: rotate(30deg);   /* Safari and Chrome */
        -o-transform: rotate(30deg);        /* Opera */
        -moz-transform: rotate(30deg);      /* Firefox */
    }

---

scale() 缩放

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

    div {
        transform: scale(2,4);
        -ms-transform: scale(2,4);      /* IE 9 */
        -webkit-transform: scale(2,4);  /* Safari 和 Chrome */
        -o-transform: scale(2,4);       /* Opera */
        -moz-transform: scale(2,4);     /* Firefox */
    }

---

translate3d(x,y,z)

定义 3D 转换

.p4{
    transform:translate3d(190px,0,0) scale(0.8);
    /*transform-origin:100% 50%;*/
    opacity: 0.8;
    z-index: 2;
}

---

transition 过渡

transition： 属性的名称、过渡效果需要多少秒、速度曲线、何时开始

.p4{
        -webkit-transition: width 2s ease 0s;
        -o-transition: width 2s ease 0s;
        transition: width 2s ease 0s;
}

---