现代浏览器对大多数CSS3属性都有很多支持。 实际上,您可以轻松地应用CSS动画 ,转换和渐变。 但是,仍然有许多旧版本的Internet Explorer用户不完全支持较新CSS3属性 。 在本文中,我将分享如何在IE6-8上启用CSS转换的快速提示。
CSS Transform属性允许我们在二维或三维空间中转换元素 。 您可以使用CSS Transform转换,缩放,旋转和倾斜元素。 对于诸如Firefox,Opera和基于Webkit的现代浏览器,基于浏览器的供应商特定前缀(分别使用-moz-transform
, -o-transform
和-webkit-transform
)支持CSS Transform,但在Internet Explorer上找不到它。 因此,在这里,我将使用名为cssSandpaper的 JavaScript库,即使在旧版IE中,该库也允许跨浏览器CSS转换。
入门
首先,从Github存储库下载cssSandpaper 。 然后,包括cssSandpaper随附的以下必需JavaScript库。
<script type="text/javascript" src="/path/to/js/EventHelpers.js"></script>
<script type="text/javascript" src="/path/to/js/cssQuery-p.js"></script>
<script type="text/javascript" src="/path/to/js/jcoglan.com/sylvester.js"></script>
<script type="text/javascript" src="/path/to/js/cssSandpaper.js"></script>
cssSandpaper 引入了一个新的带前缀的属性来应用转换 。 此新属性可以与其他浏览器供应商前缀(例如-moz-transform
, -webkit-transform
)或其他浏览器前缀的属性结合使用,如下所示:
#container {
-moz-transform: <function-list>;
-webkit-transfrom: <function-list>;
-sand-transform: <function-list>;
transform: <function-list>;
}
cssSandpaper继承了标准CSS函数以执行转换,例如旋转和缩放。 以下是可以在-sand-transform
属性中使用的功能的列表。
- rotation(angle)用于以度或弧度旋转元素。 例如:
-sand-transform: rotate(45deg)
- scale(sx [,sy])用于缩放元素。 例如:
-sand-transform: scale(1[,2])
这意味着我们根据原始大小在X轴上缩放元素,而在Y轴上将元素缩放为原始大小的两倍。 - skewX(ax)和skewY(ay)用于将元素绕x和y轴倾斜指定角度(以度或弧度为单位)。 例如:skewX(30deg)
- matrix(a,c,b,d,tx,ty)用于制作由指定的六个值组成的2D变换矩阵。
使用范例
假设我们使用<div>
构建了一个盒子。 现在,您希望框从其初始位置水平移动200px
,同时将其旋转45度。 您可以使用cssSandpaper达到此效果,如下所示:
#box{
width: 150px;
height: 100px;
-sand-transform: translate(200px, 0) rotate(45deg);
}
您可以在下面查看演示。 请注意,您也应该在Internet Explorer 6-8中查看它。
结论
这可能不是最优雅的解决方案,因为我们需要堆叠一堆JavaScript库来实现这种简单效果。 但是,如果老板或客户坚持要在Internet Explorer 8中启用轮换功能(出于任何荒谬的原因),则可以使用cssSandpaper来实现。