CSS复习 过渡和旋转

一、css精灵

css 精灵使用：
1、精灵图一定是在某一个限制了宽高大小的元素中作为背景图出现的
2、通过背景图位置设置对应的图片的显示
3、此时要改变图片位置，那么则通过改变元素的位置来实现（可以通过定位，margin等各种方式）
优点：
1、若干小图标拼合成一张图后布局，减少http请求数，
2、从而隐形地提升了网站性能。
3、同时也减少图片文件数目、大小。
缺点：
1、在图片合并的时候，增加开发成本
2、在开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置
3、在维护的时候比较繁琐
4、使图片失去了center之类的灵活性

二、过渡

transition：时间（秒）；

transition-duration：500ms；/*持续时间,1s=1000ms*/

• 过渡样式
  transition-property:; 会产生带有平滑改变元素宽度的过渡效果
  过渡属性 只能写上有数值改变的属性;如:width/height/left/top/padding/margin/text-indent
  颜色会转变成16进制颜色值进行过渡
• 过渡延迟
  transition-delay:时间；
• 过渡的速度
  linear
  规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  ease
  规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  ease-in
  规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  ease-out
  规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  ease-in-out
  规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  cubic-bezier(n,n,n,n)
  在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
• 复合写法
  transition: property duration timing-function delay;

*第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay。

三、旋转 transform

• transform:scale(同比例放大缩小的数值）;缩放
  transform:scale(0.5); /*缩小一倍*/

scaleX(); x轴缩放
scaleY(); y轴缩放

• rotate 旋转
  transform:rotate(3.14rad);/*旋转180°；3.14弧度*/

deg 角度
turn 圈数
rad 弧度
弧度=π/180×角度；
角度=180/π×弧度；

rotateX();沿着X轴旋转；
rotateY();沿着Y轴旋转；

• skew 倾斜转换

skewX:(); 沿着X轴斜切
skewY:(); 沿着Y轴斜切

• translate 位移
  transform:translate();

transform:translateX(); 在x轴上位移
transform:translateY(); 在轴上位移

• 变换原点
  transform-origin:值; 原点默认是在中间

transform-origin:left top; /*原点改为在左上角*/
transform:scale

旋转位移

transform: translateX(200px);
transform: rotate(360deg);

这种写法只有旋转有作用，同一条样式后者覆盖前者

transform: translateX(200px) rotate(360deg)

这样才能边位移边旋转

• matrix 2d矩阵
  默认matrix(1,0,0,1,0,0) (a,b,c,d,e,f)

        translateX: 
            e = e + x;
        translateY:
            f = f + y;
        
        scaleX:
            a = a*x;
            c = c*x;
            e = e*x;
        scaleY:
            b = b*y;
            d = d*y;
            f = f*y;    
        skewX:
            c = Math.tan(x*Math.PI/180)
        
        skewY:
            b = Math.tan(x*Math.PI/180) 
        
        rotate:
            a = Math.cos(deg*Math.PI/180)
            b = Math.sin(deg*Math.PI/180)
            c = -Math.sin(deg*Math.PI/180)
            d = Math.cos(deg*Math.PI/180)   
        
        当进行多种不同的变换的时候，后写的会先执行，（1,0,0,1,0,0）转变成新的矩阵公式，然后执行前面的语句，在新矩阵公式的基础上再次改变。也就是后写的限制性，先写的后执行
  

浏览器前缀

-webkit- chrome和safari
-moz- 火狐
-ms- IE 微软
-o- Opera