IE浏览器CSS transform旋转属性的演示

最新推荐文章于 2024-04-29 00:45:00 发布
最新推荐文章于 2024-04-29 00:45:00 发布
阅读量1.7k 收藏
点赞数
分类专栏： html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE浏览器CSS transform旋转属性的演示</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<style type="text/css">
body {
 font-family: "Arial", sans-serif;
}
#ptOfRef {
 border: #000 solid 3px;
 background: #6FF;
 width: 204px;
 height: 204px;
 position: absolute;
 top: 100px;
 left: 100px;
}
#example {
 position: absolute;
 top: 100px;
 left: 100px;
 border: #09F solid 1px;
 background: #F90;
 font-weight: 900;
 color: #FFF;
 padding: 10px;
 display: block;
 width: 200px;
 height: 200px;
 margin-top: -1px;
 margin-left: -1px;
 transform: rotate(40deg);
 -o-transform: rotate(40deg);
 -webkit-transform: rotate(40deg);
 -moz-transform: rotate(40deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)}
</style>
<!--[if IE]>
<style type="text/css">
#example {
 top: 50px;
 left: 50px;
}
</style>
<![endif]-->
</head>
<body>
<div id="ptOfRef"></div>
<div id="example">这是一个CSS旋转属性的演示</div>
</body>
</html>
younger_z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
兼容IE的旋转效果
牧的专栏
02-08 5953
先看看效果 chrome下 IE下效果相同，也就是该源码是一个兼容的方案，包括ie6-8。这里介绍两个方案 方案1： 1.按照上图可以切一张图片，旋转45度保存 2.然后使该图片旋转-45度即可 transform: rotate(-45deg);方案2： 1.这里不用切图，直接做一个方形的背景，文字也是自己填充，只不过要有两次旋转 2.外层div旋转-45度，内层文字旋转4
纯css3 transform旋转属性创建立体纹理文字特效
11-23
在本文中，我们将深入探讨如何使用CSS3的`transform`属性中的旋转功能来创建立体纹理文字特效。CSS3是 Cascading Style Sheets（层叠样式表）的第三个主要版本，它引入了许多新特性，大大增强了网页设计的灵活性和...
css3 transform过渡抖动问题解决
01-18
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移还会使图片或文字失帧，变得模糊，可以使用clac解决 如： transform:translate(-50%); 换成： transform: translate(calc(-50% + 1px)); clac是css3
CSS变形 transform 的所有属性详解
最新发布
大剑师兰特的GIS世界
04-29 1121
CSS变形（Transform）属性允许您对元素进行复杂的2D或3D变换，包括旋转、缩放、移动（平移）、倾斜和矩阵变换。这些变换不会影响文档流，而是改变元素的外观。
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...
每日一记：ie浏览器中CSS3 -webkit-transform(元素变换)不生效的解决方案
点滴的幸福
01-17 2822
在谷歌浏览器中，CSS3 -webkit-transform(元素变换)这个参数是没问题的，但在ie或者edge浏览器中就失效了。 经过搜索，发现将前边的"-webkit-"去掉就可以了。 不知道这是不是正道，但至少解决了问题。 有知道的朋友吗？ ...
CSS transform属性
热门推荐
过客如期的博客
03-30 4万+
一，transform（变形） 1.transform字面的意思就是变形的意思，在CSS3中，transform支持的几个操作有旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 二，transform各操作使用介绍 1.rotate(deg) ：rotate以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。 2.translate(x,y)......
IE浏览器专有css属性之zoom详解
09-25
Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等
css3 transform旋转属性鼠标悬停3D立体图片旋转显示
11-03
在现代网页设计中，CSS3（层叠样式表第三版）提供了一系列强大的功能，其中之一就是`transform`属性。本教程将深入探讨`transform`中的旋转属性，以及如何利用这一特性实现鼠标悬停时3D立体图片的动态旋转展示效果。...
深入解析IE浏览器专有的CSS属性hasLayout
09-24
微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了layout ,也就是hasLayout.下面我们便一起来深入解析IE浏览器专有的CSS属性hasLayout
css3 transform属性详解
12-13
CSS3变形是一些效果的集合，比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。 CSS3的2D ...
过渡transition，transform2D转换，3D旋转
你还有我
12-17 708
目录过渡，2D转换transform 属性效果缩放transform：scale位移 transform: translate旋转：transform：rotate倾斜 transform：skew3D旋转位移 transform: translate3d(x,y,z);3D呈现transform-style：persevere-3d 过渡，2D转换 transition 过渡 之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。 css3新增了过渡这
html中旋转属性,IE中的CSS旋转属性
weixin_35973521的博客
06-09 93
幕布斯6054654要在IE中旋转45度，您需要样式表中的以下代码：filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='autoexpand',M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811...
实现div旋转
world_zhishijie的博客
04-01 733
{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera
兼容IE8的旋转角度
wangweiscsdn的博客
02-14 6533
css代码如下： div{ position:absolute; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(350deg); -moz-transform: rotate(350deg); -o-transform: rotate(350deg); t
CSS3 transform旋转属性
编程手札
12-29 4401
目前越来越多的浏览器兼容CSS3标准了，CSS3里有一个使对象旋转的属性transform rotate，号称兼容CSS3的浏览器对它的支持也不算好，好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE浏览器里对这个transform属性无法通过一般的CSS写法去实现。 在W3C官方的标准里，通过transform属性使对象旋转的写法如下
css transform 旋转45°
02-21
CSS的transform属性可以用来对元素进行旋转、缩放、平移和倾斜等变换操作。要将元素旋转45°，可以使用transform的rotate()函数。 具体实现如下： ```css .rotate-45 { transform: rotate(45deg); } ``` 以上代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值