CSS

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;}

---