ie9变换:rotate()在ie9中不起作用
在IE9中，transform属性的rotate()函数不起作用。这是因为IE9不支持CSS3的transform属性。transform属性用于对元素进行旋转、缩放、倾斜或平移等变换操作。rotate()函数是其中的一种变换操作，用于对元素进行旋转。
然而，虽然IE9不支持transform属性的rotate()函数，但可以通过其他方式实现元素的旋转效果。一种常见的方法是使用IE9支持的滤镜效果（filter）。通过设置filter属性的值为"progid:DXImageTransform.Microsoft.Matrix"，可以在IE9中实现元素的旋转效果。
以下是一个示例代码，演示如何在IE9中实现元素的旋转效果：
<!DOCTYPE html>
<html>
<head>
<style>
.rotate {
width: 100px;
height: 100px;
background-color: red;
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122081, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.9848077530122081, SizingMethod='auto expand');
}
</style>
</head>
<body>
<div class="rotate"></div>
</body>
</html>在上述代码中，我们创建了一个宽高为100px的红色方块，并通过设置filter属性的值来实现旋转效果。其中，M11、M12、M21、M22分别表示旋转矩阵的四个参数，可以根据需要调整这些参数来实现不同的旋转角度。
需要注意的是，虽然通过滤镜效果可以在IE9中实现元素的旋转效果，但滤镜效果的性能较低，且语法较为复杂。因此，在现代的Web开发中，推荐使用更先进的浏览器，如Chrome、Firefox等，以获得更好的用户体验和开发效率。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云物联网平台（TIoT）：https://cloud.tencent.com/product/tiot
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
相关·内容
我发现-webkit-transform: rotateZ(10deg);不能在Internet Explorer9中工作。用CSS3可以用什么来代替它呢？
浏览 0提问于2012-07-13得票数 5
回答已采纳
2回答
我在IE9中使用了以下内容：它的工作方式是旋转文本，但奇怪的是，它无缘无故地为元素提供了黑色背景view-see-the-difference-in-your-sector .views-field-title span { -moz-transform: rotate(-90deg);
-webkit-transform: rotat
浏览 1提问于2012-08-15得票数 3
回答已采纳
1回答
我在一个块级element>中使用svg，我尝试使用transformrotate(180deg)来旋转该块。.This在火狐、chrome和IE Edge.When中工作得很好。我打开IE9，它不是working.How来解决这个问题。
浏览 53提问于2017-03-10得票数 0
2回答
我试图旋转一个元素(任何元素div，p..)使用我放置在元素左上角的句柄(handle=>div)，现在我的问题是元素不能完全旋转到360度，任何人都可以帮忙： var rotateCSS = 'rotate
浏览 2提问于2012-06-06得票数 4
回答已采纳
但是它在IE9上不起作用。@keyframes ring2 { -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform-origin(360deg);
-moz-transfo
浏览 4提问于2015-03-24得票数 2
回答已采纳
我在IE9中注意到，使用矩阵DXIImageTransform将对旋转的文本进行像素化。我在IE8或7中没有这个问题。通常我会在IE9中使用css3选项，但是由于我无法控制的原因，页面呈现为古怪模式(有效的html5 iframe嵌入在没有doctype的第三方页面中)。<!</span>
在IE8中，旋转文本的结果是平滑的，但在IE9</e
浏览 6提问于2012-11-12得票数 6
回答已采纳
6回答
onclick='$(\"#divToggle\").slideToggle(\"slow\");'>这段代码切换我的div，但图像只在第一次单击时旋转，然后保持“向上”。我正在使用这个：
浏览 6提问于2013-01-18得票数 0
回答已采纳
问题:当使用"overflow: auto;“计算包含div滚动条的IE9和scrollHeight时，浏览器(FF5，Chrome12，IE9)会忽略应用于div内的子元素的Chrome12转换。type="text/css">div img {-webkit-transform: scale(2) rota
浏览 0提问于2011-07-06得票数 10
回答已采纳
4回答
在悬停图像上旋转45度
、、、、
我尝试将CSS与变换旋转结合使用，但没有成功。有没有人有什么想法(可能是jQuery，javascript )？{ /* Firefox */ /* Safari and Chrome */
-webkit-transform:rotate(45deg);&#
浏览 4提问于2012-11-15得票数 2
回答已采纳
这将导致黑色背景在边缘的三角形中可见，就像您将一张纸放在桌子上并将其稍微向左旋转一样。
实际上，这可以用一些css来完成，而且工作得很好(IE除外)。
浏览 0提问于2011-03-05得票数 0
4回答
我已经得到的css，这是工作在所有浏览器，除了IE9。我对IE7 &IE8使用了过滤器：然而，这似乎使我的元素在IE9中是透明的，并且CSS3有没有人知道IE9中的旋转元素？W。
浏览 52提问于2011-02-02得票数 77
回答已采纳
请参阅：/* Safari */ -moz-transform: rotate20px 0px;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在最新的FF和Chrome中工作得很好，但在
浏览 0提问于2011-03-27得票数 3
回答已采纳
1回答
我有一个CSS3动画运行在我的搜索按钮时，点击，这是很好的工作，除了ie9。: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ transform: rotate(0deg); /* Firefox 16+, IE 10+,
浏览 1提问于2015-09-24得票数 0
回答已采纳
我想在IE9中运行或转换为java脚本&在IE9中运行！animation-direction: alternate; from {transform:rotate(10deg);}to {transform:rotate(-10deg);} @-webkit-keyframes mymove {
from {tr
浏览 0提问于2014-10-07得票数 1
回答已采纳
5回答
我尝试了以下jquery插件，结果如下：
请建议一种在IE9中翻转div的方法。如有任何帮助，将不胜感激。
浏览 0提问于2013-08-27得票数 3
height 2s, transform 2s; width: 300px; -webkit-transform: rotate(180deg); /* Safari */ transform: rotate(180deg);-ms-transform: rotate(180deg
浏览 2提问于2016-11-08得票数 0
(注意:出于诊断目的，我在已擦除的光线周围留下了一个黄色笔划，以便您可以看到它们已执行。)代码可以在Chrome和Firefox中运行，但在IE9中，当我将擦除部分保留为活动状态时，不会绘制原始光线。换句话说，如果我注释掉创建擦除笔划的部分，就会出现光线填充。我测试过各种固定的alpha值，IE9似乎能很好地处理它们。我已经将两个部分都设置为globalCompositeOperation = 'source-over‘，但仍然得不到原始光线。有人能帮我改正这段代码以便在<em
浏览 0提问于2011-06-04得票数 0
现在我的问题是，对于任何IE9用户，请转到我的网站或使用下面的代码。正如你在打印预览中看到的:上下文菜单->“打印预览...”，旋转失败！DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand'); -moz-transform-origin: 0% 0%;
-webkit-transform:
浏览 0提问于2011-10-24得票数 1
回答已采纳
1回答
CSS3动画在IE9中不起作用。这是。有没有可能让他们在IE上工作，或者我犯了一些愚蠢的错误？下面是不起作用的代码： 0% { -ms-transform: rotate(0deg); } angle+=0.3;
浏览 0提问于2012-08-12得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
