transform兼容ie8

最新推荐文章于 2024-04-29 00:45:00 发布
最新推荐文章于 2024-04-29 00:45:00 发布
阅读量2w 收藏 3
点赞数 3
分类专栏： Hack 兼容问题 文章标签： 兼容问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Daisukes/article/details/53171319
版权
其他浏览器正常写法：transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-tranform:rotate(-30deg); -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg);ie8写法： filter: progid:DXIm
摘要由CSDN通过智能技术生成

其他浏览器正常写法：

transform:rotate(-30deg);
 -ms-transform:rotate(-30deg);
 -o-tranform:rotate(-30deg);
 -webkit-transform:rotate(-30deg);
 -moz-transform:rotate(-30deg);

ie8写法：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.866025404, M12=0.5, M21=-0.5, M22=0.866025404) ;

笔记：Matrix 滤镜在旋转方面需要用到 M11 M12 M21 M22 四个参数，分别代表 cos(旋转的角度)、-sin(旋转的角度)、sin(旋转的角度)、cos(旋转的角度)。但这里需要注意的是 IE 中旋转的中心点会发生变化。

CSS  filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M1

最低0.47元/天 解锁文章
Daisukes
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js兼容ie8的选项卡.rar
05-14
本项目"js兼容ie8的选项卡.rar"提供了一个解决此问题的实例，主要针对选项卡组件的实现。以下将详细介绍其中涉及的知识点： 1. **DOM操作**： IE8不支持W3C标准的`document.createElement()`, `appendChild()`, `...
兼容ie的平面百叶窗轮播
06-27
"兼容ie的平面百叶窗轮播"是一种特殊类型的轮播效果，旨在确保在旧版本的Internet Explorer（IE）浏览器上也能正常运行。在现代浏览器如Chrome、Firefox、Safari等使用WebKit内核的浏览器中，这种效果通常能获得更好...
transform的兼容性写法浏览器 和 transition
weixin_34375251的博客
12-14 2245
transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Oper...
IE8上面的旋转和透明度，利用滤镜属性去处理（兼容css3的transform和rgba()）
weixin_41757599的博客
07-09 696
1.关于在IE浏览器上面的一个旋转问题 IE8不支持css3的transform属性，因此在兼容ie8的时候需要用到滤镜来进行兼容 语法： 兼容c3属性的浏览器在设置旋转属性的时候： transform:rotate(-30deg);  -ms-transform:rotate(-30deg);  -o-tranform:rotate(-30deg);  -webkit-transform:rotate(-30deg);  -moz-transform:rotate(
CSS变形 transform 的所有属性详解
最新发布
大剑师兰特的GIS世界
04-29 1159
CSS变形（Transform）属性允许您对元素进行复杂的2D或3D变换，包括旋转、缩放、移动（平移）、倾斜和矩阵变换。这些变换不会影响文档流，而是改变元素的外观。
解决IE8不支持transform、background-size属性
weixin_30593443的博客
03-26 458
一、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 -we...
优雅降级实现IE8的transform平移属性
lijj_html5的博客
03-30 2047
其他方法如CSS滤镜做ie8兼容 transform 不起效果； 下面是优雅降级的方法； 首先通过，navigator.userAgent 获得 浏览器的信息，然后通过 MSIE  8.0 判断是否是ie8浏览器。如果是，就执行降级方法，如果不是就直线原本方法。
兼容 ie 的 transform
{ focus : web }
02-23 1342
css 2d transform 是 css3 引入的一个新的 css 属性，特别是可以很方便对元素进行旋转和扭曲变换，摆脱了传统枯燥的方方正正的形象，很好玩，但其实 ie 早就支持这种变化了，通过 matrix 滤镜在一些限制条件下完全可以达到同样的效果.   兼容   从角度转化为 matrix 滤镜所需要的矩阵值涉及基础的坐标旋转方面的知识，可参考 wiki . 简单举例：   ...
CSS3中的transform变形
weixin_30367169的博客
10-16 461
　　在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。 　　目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+ 　...
解决VUEX兼容IE上的报错问题
08-27
然而，由于IE浏览器对某些现代JavaScript特性（如Promise）的支持不足，使用Vuex时可能会遇到兼容性问题，导致在IE上运行出错。本篇文章将详细介绍如何解决在IE上使用Vuex时遇到的“[vuex] vuex requires a Promise ...
IE兼容CSS3
06-09
在IE8及更早版本中，浏览器内核使用的是Trident，它对CSS3新特性的支持非常有限。而从IE9开始，虽然开始支持一部分CSS3，但与现代浏览器相比仍有差距。例如，IE9不支持CSS3的transform、transition和animation等特效...
IE10兼容性白皮书
11-15
### IE10兼容性白皮书关键知识点解析 #### 一、HTML5增强用户体验的关键特性 **1. Canvas元素：** - **定义：**Canvas 元素是 HTML5 中新增的一项强大功能，允许开发者在页面上绘制图形。 - **优势：** - 可以在...
ie8实现transform:scale放大效果
x619y的专栏
06-02 5180
.class{ filter: progid:DXImageTransform.Microsoft.Matrix(             M11=1.05,             M12=0,             M21=0,             M22=1.05,             SizingMethod='auto expand'); }
html设置旋转中心兼容ie,CSS3 transform旋转属性在IE中的实现
weixin_29163797的博客
06-03 321
IE浏览器CSS transform旋转属性的演示body {font-family: "Arial", sans-serif;}#ptOfRef {border: #000 solid 3px;background: #6FF;width: 204px;height: 204px;position: absolute;top: 100px;left: 100px;}#example {posit...
transform 图标旋转，IE8、IE7不兼容
weixin_30508241的博客
08-23 439
要将图标旋转，只需使用transform的rotate以及transition即可完成旋转的动画效果。ease 规定慢速开始，然后变快，然后慢速结束的过渡效果; ease-in 规定以慢速开始的过渡效果; ease-out 规定以慢速结束的过渡效果; ease-in-out 规定以慢速开始和结束的过渡效果liai{　　background:url(icon.png)no-r...
一个css transform效果，兼容IE,FF,Chrome,Safari，不支持Opera
weixin_30305735的博客
10-07 75
.pre { font-family:微软雅黑; width:420px; border:3px solid red; /*for IE*/ filter : progid:DXImageTransform.Microsoft.Matrix(SizingMethod="auto expand",M11=1,M12=-0.4,M21=0.4,M22=1); /*for firefox...
IE8 不兼容简单解决方法
coding
04-12 1393
这句代码是为了使浏览器使用IE7的strict模式来工作， 因为IE8使用了新的layout渲染引擎，所以会对以前版本的浏览器不兼容，所以IE8通过这种方式是浏览器按照IE7的模式运行，具体的可以通过搜索引擎了解，也可以看看这个链接的介绍 http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
html在ie8中的兼容性问题,IE8兼容性问题
weixin_31673213的博客
06-28 589
1、兼容H5标签和部分C3属性1.1 兼容H5标签 html5.js/*HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 LicensedUncompressed source: https://github.com/aFarkas/html5shiv*/(function(l, f) {function m() ...
transform兼容性
Mankii的博客
10-23 3830
转载引用：http://blog.csdn.net/ding_lucky/article/details/73163477 转载引用：http://blog.csdn.net/teresa502/article/details/8207198 transform 的四个rotate、scale、skew和translate属性， 目前支持的浏览器 Safari 3.1+、 Chr
jquery兼容ie8的轮播图
05-24
以下是一个简单的 jQuery 轮播图插件，支持 IE8 及以上版本： HTML： ``` <div class="slider"> <ul class="slider-list"> <li><img src="img/slider-1.jpg" alt=""></li> <li><img src="img/slider-2.jpg" alt=""></li> <li><img src="img/slider-3.jpg" alt=""></li> </ul> <div class="slider-nav"> <a href="#" class="slider-prev">Prev</a> <a href="#" class="slider-next">Next</a> </div> </div> ``` CSS： ``` .slider { position: relative; overflow: hidden; } .slider-list { position: absolute; top: 0; left: 0; width: 300%; list-style: none; margin: 0; padding: 0; } .slider-list li { float: left; width: 33.333%; height: 200px; } .slider-list li img { width: 100%; height: 100%; display: block; } .slider-nav { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, 0); z-index: 1; } .slider-nav a { display: inline-block; margin: 0 10px; padding: 5px 10px; background-color: #fff; border: 1px solid #ccc; color: #333; text-decoration: none; } ``` JavaScript： ``` $(function() { var $slider = $('.slider'); var $sliderList = $slider.find('.slider-list'); var $sliderItem = $sliderList.find('li'); var $sliderNav = $slider.find('.slider-nav'); var $sliderPrev = $sliderNav.find('.slider-prev'); var $sliderNext = $sliderNav.find('.slider-next'); var sliderCount = $sliderItem.length; var currentIndex = 0; var slideWidth = $slider.width(); var isAnimating = false; // 初始化 $sliderList.css({ width: slideWidth * sliderCount }); $sliderItem.css({ width: slideWidth }); // 上一张 $sliderPrev.on('click', function(e) { e.preventDefault(); if (isAnimating) return; currentIndex--; if (currentIndex < 0) { currentIndex = sliderCount - 1; } sliderAnimate(currentIndex); }); // 下一张 $sliderNext.on('click', function(e) { e.preventDefault(); if (isAnimating) return; currentIndex++; if (currentIndex > sliderCount - 1) { currentIndex = 0; } sliderAnimate(currentIndex); }); // 动画 function sliderAnimate(index) { isAnimating = true; $sliderList.animate({ left: -slideWidth * index }, 500, function() { isAnimating = false; }); } }); ``` 注意事项： 1. 在 IE8 中，由于不支持 CSS3 transform 属性，所以需要使用 jQuery 的 animate() 方法来实现动画效果。 2. 在 IE8 中，需要将 JavaScript 代码放在 jQuery 库文件之后，否则会出现 $ 或 jQuery 未定义的问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值