平移
transform: translate(100px,100px);
transform: translateX(100px); transform: translateY(100px); / / 同时写会被下面的覆盖 */
放大缩小
transform: scale(2);
一个值表示x轴y轴相同
倾斜
transform: skew(60deg,20deg);
第一个参数表示x轴,按逆时针方向旋转/第二个参数表示x轴,按顺时针方向旋转
旋转
transform: rotateX(300deg);/transform: rotateY(300deg);/ transform: rotate(300deg);
/* transform: rotateX(300deg);沿着x轴旋转 / transform: rotateY(300deg);/ 沿着Y轴旋转 / transform: rotate(300deg);/ 沿着中心点旋转 */
过渡
transition: all 2s linear .5s;/加在div上
过渡属性的使用4-3 过渡动画函数(( transition-timing-function ) 指定浏览器的过渡速度,以及过渡期间的操作进展情况,通过给过渡添加一个函数来指定动画的快慢方式 linear 规定以相同速度开始至结束的过渡效果 ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值) ease-in 规定以慢速开始的过渡效果 ease-out 规定以慢速结束的过渡效果 ease-in-out 规定以慢速开始和结束的过渡效果