CSS3动画-transform
一、transfrom 可以用来设置元素的形状改变,主要有以下几种变形:roate(旋转) scale(缩放) skew(扭曲) translate (平移);
使用方法:div{transform:none|transform-function[...]} transform-function[...]指的是roate()...等函数,可以有一个或者多个,用空格隔开,参数包含在括号里面;none表示不作任何变换
如:
div{transform: scale(1,3) roate(30deg)}
tansform-origin 基点:所有的变形都是基于基点,基点默认为元素的中心点
用法:
div{transform:transform-origin:(x,y)} //x,y的值是百分比,rem,px... 也可以用单词:x: left/center/right y:top/center/bottom
roate 旋转 表示通过指定的角度对元素进行旋转变形,整数表示顺时针,负数表示逆时针
div{transform:roate(30deg)}
scale 缩放 对元素进行放大或者缩小;
div{transform:scale(3,2)}//当不指定X或者是Y时,水平、垂直同时缩放;scaleX(1) scaleY(2)
//注:缩放比例大于1时是放大 小于1时是缩小 等于1是原始比例,不做缩放
translate 移动 移动的单位长度是px rem ...
div{transform:translate(10px,20px)}//translateX(10px) translateY(20px)
skew 扭曲
div{transform:skew(30deg)} //当只有一个参数时,表示水平垂直都是扭曲一样的,也可是skewX(20deg) skewY(10deg) skew(10deg,20deg)