CSS——转换小案例
CSS中的转换:transform 位移 transform:translate(x,y);水平方向x和垂直方向y,值为数字或者百分比 transform:translateX(num);水平方向 transform:translateY(num);垂直方向 转换中位移最大的优点:不影响其他盒子的位置 里面的百分比是参照自身的宽高 旋转 transform:rotate(num deg); 单位为deg 旋转时默认为元素的中心点旋转 变换的中心点 transform-origin:x y;默认为center center x、y的值可以是数值、百分比、方位名词(top left bottom right center) 缩放 transform:scale(x,y); 水平方向(宽),垂直方向(高) transform:scale(num); num>1 为放大倍数 num<1 为缩小倍速 等比列缩放 ,指定宽,高会自适应的等比列的缩放 缩放的优点:不影响其他盒子,可以设置缩放变换的中心点 转换的简写形式 对于转换来说,可以同时进行旋转、缩放、位移的操作,但是这些组合的写法不同,最后变换的结果也是不同的。 转换的简写形式,浏览器解析是从右往左进行解析的 变换的时候,其实坐标轴也是在变换的 * 旋转中,坐标轴也跟着旋转了30度 * 浏览器解析过程:元素先向右平移300px,