zoukankan      html  css  js  c++  java
  • 解决IE8不支持transform、background-size属性

    一、transform

    转换工具:http://www.useragentman.com/IETransformsTranslator/

    总结来源:http://blog.sina.com.cn/s/blog_42cdca7d010142m6.html

    1)旋转90/180/270度

    1 .rot90 {
    2 -moz-transform:rotate(90deg); 
    3 -webkit-transform:rotate(90deg);
    4  transform:rotate(90deg); 
    5 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
    6 }

    最后一句的"rotation=1"是关键,参数可以是0、1、2、3,除了这几个数字以外,写其他数字图片都不会发生旋转。

    旋转的角度只要将数值乘以90(π/2),表示顺时针旋转90度,与transform:rotate(90deg);是一个意思。

    2)旋转任意角度

    旋转任意角度,只需记住下面这串代码:

     1 filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand'); 

    示例:

    1 #rot135
    2 {
    3 -moz-transform:rotate(135deg); 
    4 -webkit-transform:rotate(135deg); 
    5 transform:rotate(135deg);
    6 filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,
    7 SizingMethod='auto expand');
    8 }
    9 ```

    如果只想旋转135度,直接就是(cos(135) = -0.707)

     1 filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand'); 

    如果不仅想旋转135度而且还想放大两倍,那么M11/M12/M21/M22都乘以2:

     1 filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.414,M12=-1.414,M21=0.1.414,M22=-1.414,SizingMethod='auto expand'); 

    translate利用margin来实现

    二、background-size

    通过滤镜来实现效果:

    1 div {
    2 background-image: url('https://www.cnblogs.com/images/logo_small.gif');
    3 background-size: cover;
    4 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.cnblogs.com/images/logo_small.gif',sizingMethod='scale');
    5 }

    注意两处的路径必须相同,并且是绝对路径!

  • 相关阅读:
    Java POI 导出EXCEL经典实现 Java导出Excel
    Sublime Text 3 相关
    phonegap 4.2 环境搭建 及 项目创建 运行
    Js 简单分页(一)
    VC调试闪退解决办法
    查找一个数中1的个数
    居中详解
    解决ajax跨域请求 (总结)
    js实现css3的过渡,需要注意的一点(浏览器优化)
    reflow和repaint(摘录自张鑫旭的翻译)
  • 原文地址:https://www.cnblogs.com/pighair/p/7773163.html
Copyright © 2011-2022 走看看