html5大转盘

最新推荐文章于 2025-08-09 14:28:55 发布

原创

最新推荐文章于 2025-08-09 14:28:55 发布 · 694 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5

这是一个使用HTML5实现的抽奖转盘示例。通过CSS3的旋转和IE的滤镜技术，实现转盘图片的旋转效果。点击按钮，转盘会随机转动并停在某个奖项上，展示了HTML5在动态效果上的应用。

<!DOCTYPE html>
<html>
<head>
    <title>抽奖</title>
    <meta charset="utf-8">
    <style type="text/css">
        #container{width: 400px;height: 400px;position: relative;margin: 0 auto;}
        #demo{position: absolute;/*filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");*/
		filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');
		-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */}
		/*filter:progid:DXImageTransform.Microsoft.Matrix
这个是微软的滤镜，只在IE有效。*/
/*IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。
它一共接受五个参数，前四个参数需要自行计算三角函数，然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，
其中的rotation表示旋转角度，如果顺时针旋转7.5度，则rotation就为7.5；第五个参数SizingMethod表示重绘方式，'auto expand'代表自动扩展到新的边界。*/
    </style>
&l