作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想使用 javascript 将 div 顺时针旋转一个 Angular ,比如 60 度。
通过谷歌的很多链接,一个合理的解决方案似乎是使用数学库,但我不知道如何实现上述问题。三 Angular 学从来都不是我的菜:|
这可以通过 jQuery 轻松完成,但我不允许使用任何库。通过谷歌搜索,我发现了砂纸等。但必须使用可用的 javascript 函数来完成。另外,由于是在IE6上,所以不能使用CSS3。 :/
那么,假设我想将测试 div 旋转一个 Angular ,我该怎么做?
<html>
<head>
<style>#test {background:#000; width:100px; height:100px;}</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
谢谢:)
最佳答案
好吧,试试这个。这会旋转一个盒子(在 IE8 中)并且应该在 IE6 中工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>IE6 rotation test</title>
<style type="text/css">
#spinner {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 100px;
border: 2px solid red;
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')
}
</style>
<script type="text/javascript">
var spinnerAngle = 0;
window.onload = function() {
setInterval(function () {
spinnerAngle += Math.PI / 64;
setElementAngle(document.getElementById('spinner'), spinnerAngle);
}, 25);
}
function setElementAngle(ele, radians)
{
costheta = Math.cos(radians);
sintheta = Math.sin(radians);
ele.filters.item(0).M11 = costheta;
ele.filters.item(0).M12 = -sintheta;
ele.filters.item(0).M21 = sintheta;
ele.filters.item(0).M22 = costheta;
}
</script>
</head>
<body>
<div id="spinner"></div>
</body>
</html>
参见the documentation for the Matrix filter 。 “sizingMethod”设置显然是必要的。
关于javascript - 使用javascript将div旋转一定 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6932131/
我正在尝试开发右边框/Angular 具有特定 Angular (30°) 的表格。我见过一些类似的解决方案,但它们都无法在一定程度上发挥作用。如果我想从 30° 改变到 20°,我不想花太多力气。
我是一名优秀的程序员,十分优秀!