前端学记CSS-变形、动画

变形

1、变形-2d

//顺时针方向旋转40度
transform: rotate(40deg);
//移动50px
transform: translate(50px,50px);
//缩放
transform: scale(1.3);
//倾斜度数
transform: skew(10deg);
//设置轴心，变形基点
transform-origin: center;

2、变形-3d

//透视效果
perspective: none;
//透视角度
perspective-origin: center;
//xyz移动
transform: translate3d(10px,10px,10px);
//xyz缩放
transform: scale3d(1.2,1.3,1);
//xyz旋转
transform: rotate3d(1,0,0,30deg);
//扁平化flat，3d化preserve-3d
transform-style: flat|preserve-3d;
//背面是否可见
backface-visibility: visible|hidden;

动画

//设置过度属性
transition-property: all;
//过度动画
transition-duration: 10s;

//插值器，加速度减速度
//贝塞尔曲线
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0,0,1,1);

transition-timing-function: linear;
transition-timing-function: cubic-bezier(0,0,1,1);
//延时时间
transition-delay: 10s;