CSS transform 属性

243 阅读1分钟

平移

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 规定以慢速开始和结束的过渡效果