css3

transform:变换/变形

transition:1s all;

transition:过渡

translate:移动

translate(X px,Y px);

rotate:旋转/负值就是倒转;

rotate(-360deg);

scale:缩放

scale(x,y)

skew:扭曲

skew(x deg,y deg)

* transition:过渡

* 过渡时间

transition-duration: 3s;

过渡属性(定义宽还是高)

transition-property: all;

过渡函数(运动的方式)

transition-timing-function: ease;

过渡延迟时间

transition-delay: 4s;

运动方式

ease:开始和结束慢 中间快 相当于cubic-bezier(0.25, 0.1, 0.25,1)

ease-in:(加速) 开始慢 相当于cubic-bezier(0.42, 0, 1, 1)

ease-in-out：先加速后减速 cubic-bezier(0.42, 0, 0.58, 1)

ease-out:(减速) 结束慢cubic-bezier(0.42, 0, 1, 1)

linear:匀速 相当于cubic-bezier(0, 0, 0.58, 1)

-webkit-transition: 2s width;

safari浏览器需要加前缀，-webkit- ,其他浏览器不需要添加

transition: 2s width, 4s height, 1s background-color;

transition: 2s width, 2s 2s height, 1s 4s background-color;

transition: 3s 2s width, 4s 2s height, 8s 4s background-color;

过渡： 时间 延迟时间 样式 方式

1：

transform-origin:基点

定义x轴的写法 :left/center/right/length/%

定义Y轴的写法 :top/center/bottom/20px/50%

transform-origin:x y;

2：

等价写法

transform: translate3d(30px,30px,800px)

transform:translateZ(800px) translateX(30px) translateY(30px);

transform:translateZ(800px) translate(30px,30px);

3:

transform-style:把2D转换成3D/ preserve-3d;

perspective: 像素px;

perspective 属性定义 3D 元素视图的距离，以像素计。

当元素定义 perspective 属性时，其子元素会获得透视效果

perspective翻译过来叫 景深