前端学记CSS-变形、动画

变形

1、变形-2d

//顺时针方向旋转40度transform: rotate(40deg);//移动50pxtransform: 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-3dtransform-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;