IE 滤镜实现图片旋转效果

最新推荐文章于 2022-12-05 10:52:53 发布
最新推荐文章于 2022-12-05 10:52:53 发布
阅读量1.7k 收藏
点赞数
分类专栏： CSS JavaScript 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Monarch_lin/article/details/24145767
版权
本文介绍了如何在IE浏览器中利用滤镜效果实现图片旋转。两种方法分别为BasicImage和Matrix，详细解释了各自的工作原理和参数设置。BasicImage限制为四个预设角度，而Matrix通过矩阵计算可实现任意角度旋转。
摘要由CSDN通过智能技术生成


IE滤镜可以实现页面上各种复杂的特效，如半透明、阴影、投影、遮罩、模糊、渐变、波浪、图片翻转等效果。

通过特性值filer定义一组类似函数调用的字符串来实现。如在HTML元素中定义：

<ELEMENT STYLE="filter: progid:DXImageTransform.Microsoft.filtername(sProperties)" >

以下是实现图片旋转效果的例子：

第一种方法：Ba

最低0.47元/天 解锁文章
Monarch_lin
关注
专栏目录
IE实现图片旋转
windhawk777的专栏
01-06 1309
在网页中打开的图片需要旋转。 百度了下滤镜的用法，将代码贴出来备忘。 function openwin(url) { var OpenWindow=window.open("./" + url); //写成一行 var s = url.substring(url.lastIndexOf(".") + 1, url.length); if (s == "jpg" || s
元素中心旋转在CSS3和IE滤镜中的实现
weixin_34080571的博客
12-18 142
为什么80%的码农都做不了架构师？>>> ...
IE滤镜包括旋转角度、渐变
wangweiscsdn的博客
03-02 1234
旋转滤镜： filter:progid:DXImageTransform.Microsoft.BasicImage(enabled=bEnabled,grayScale=bGray,mirror=bMirror,opacity=fOpacity,XRay=bXRay) enabled:可选项，布尔值。设置或检索滤镜是否激活。默认true表示滤镜激活，取值false表示滤镜被禁止。 graySca
2013.12.05 js实现图片的旋转 兼容IE
我能坚持多久的专栏
12-05 999
包括两部分内容，1.展示图片的文件showIm.jsp 2.控制图片旋转的js文件rotateImage.js showImg.jsp: ${title }      /getImgByte?id="/> var width = $('#image').width(); var height = $('#image').height(
兼容ie图片旋转jquery-rotate.js
前端搬运工的博客
07-22 281
$(document).ready(function(){ $("#foo").rotate({ angle:15, bind:{ mouseover:function(){ $(this).rotate({ ani...
ie 滤镜大全整理
09-28
此外，在某些情况下，为了确保滤镜能够正常工作，可能需要引入特定的IE滤镜命名空间，如"progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"用于实现旋转效果。 最后，虽然IE滤镜在现代网页设计中的使用...
使图片旋转的3种解决方案
12-04
图片旋转效果的研究最近在项目中需要做图片的旋转功能，我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况 一、图片旋转的方案 1）css3实现图片旋转功能：支持的浏览器有chrome，firefox；opera是不支持的...
网页中图片应用CSS的滤镜的效果
09-25
除了上述滤镜，CSS3还引入了更多滤镜效果，例如blur（模糊）、grayscale（灰度）、sepia（褐色）、saturate（饱和度）、hue-rotate（色调旋转）、invert（反转）、brightness（亮度）、contrast（对比度）和opacity...
-moz-transform:rotate()
weixin_30721077的博客
08-10 237
目前越来越多的浏览器兼容CSS3标准了，就连IE浏览器老大哥也开始向CSS3低头，微软宣布IE9浏览器支持更多的CSS3属性，IE9更注重HTML5标准。不过CSS3里有一个使对象旋转的属性transform rotate，号称兼容CSS3的浏览器对它的支持也不算好，好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE浏览器里...
利用filter进行图片的旋转
dasuo1170的博客
02-20 248
在高级浏览器里面可以利用css3实现图片的旋转，可是对于IE来讲，需要利用filter属性。。 利用filter进行旋转： （1）如果只用旋转90度，那么可以直接用BasicImage(rotation=参数)来实现，其中参数为： 0：不旋转；1：90度 ;2：180度；3：270度 例子，旋转-90度，那么代码如下： IE：f...
网页中图片旋转的几种实现方式
weixin_30528371的博客
10-13 2138
网页中图片旋转一般有下面三种常见的实现方式： 一、 ie 滤镜 IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。 浏览器支持： IE5.5+ CSS代码： .rotate{ filter: prog...
progid:DXImageTransform.Microsoft.Matrix
mememama111的专栏
01-19 918
说明： 使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。 使用此滤镜可以建立下列效果： 左右反转。将 M11 和 M12 的值取负。 上下反转。将 M21 和 M22 的值取负。 改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。 使用 padding 属性能够使最终图像边角被剪切的机会降到最小. 语法： fil...
html中旋转属性,CSS的旋转属性在IE
weixin_33733742的博客
06-09 242
要在IE中旋转45度，您需要在样式表中使用以下代码：filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476); /* ...
IE矩阵滤镜Matrix旋转
weixin_30325793的博客
02-02 114
SS3 transform与IE filter .trans_skew { transform: skew(35deg); } .trans_scale { transform:scale(1, 0.5); } .trans_rotate { transform:rotate(45deg); } .trans_translate { transform:translate(10px...
html中如何使图片自动旋转90度,css实现图片旋转90度的方法
weixin_39530647的博客
06-02 1260
css实现图片旋转90度的方法发布时间：2020-08-31 11:44:39来源：亿速云阅读：550作者：小新小编给大家分享一下css实现图片旋转90度的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Firefox下：-moz-transform:rotate(-90deg);-webkit-transform:r...
ie9兼容问题部分填坑
a734939283的博客
09-13 3864
ie9兼容问题部分填坑 Html 1.html5标签尽量不要使用 2.a标签的下载可以使用，但赋值失败。ie会下载出文件原名称。 css 1.flex布局不兼容，使用float解决。 2.图片大小在chrome中可以直接使用height:,会自动缩放，ie9中还需要设置width，否则图片容易变形。 3.渐变色例如 background: linear-gradient(to...
微信小程序实现黑白化
最新发布
shi450561200的博客
12-05 1939
像在清明节，经常来看到有很多网站或者App还有小程序，界面显示黑白化，那么原理是怎么实现的呢，对于不同平台可能会有区别，但是原理都差不多，几行代码就可实现，原理都是给页面加上一层灰色滤镜。效果. 1、网页实现方式 第一种：修改CSS文件 我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰 第二种 网页标签 或者 2、微信小程序实现方式 如果是使用微信小程序原生开发，直接在css 加上以下样式即可实现。 filter: gra
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值