CSS转换:仅适用于图像
Vla*_*lad 3 javascript css jquery
我有这个代码:
<html>
<head>
<script type = "text/javascript" src = "jquery-1.7.1.js"></script>
<script type = "text/javascript" src = "jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div id = "div" onclick = "Rotate()">
<img src="image.png" height="40" width="160">
</div>
<script type="text/javascript">
var x = 1;
function Rotate() {
var angle = (90 * x);
$("div").css("-moz-transform",
"rotate(" + angle + "deg)");
x++;
}</scipt></body></html>
当使用Rotate()脚本时,div似乎已经旋转了,但是当用Firebug查看时,我可以看到它div仍处于相同的位置.我做错了什么,或者我正在使用错误的东西完成我想要完成的任务？
编辑:
谢谢你的回复!我将背景设置为黄色并且它变为黄色框但是当在Firebug中单击div名称时,它显示div仍处于其原始位置.
它肯定适用于<div>.只需为div添加宽度和背景颜色,即可看到它正常工作.
HTML:
<div id="awesome">
<img src="/img/logo.png">
</div>
CSS:
body {
margin: 100px;
}
div {
background: blue;
width: 200px;
-webkit-transition: all ease-in 1s;
-moz-transition: all ease-in 1s;
transition: all ease-in 1s;
}
div:hover {
background: yellow;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
这里有一些关于如何使用css3转换属性的更多信息
我发现有一个jQuery插件,它有一个完全正在做的事情的例子,但是以一种交叉的方式.查看:https: //github.com/heygrady/transform
这个插件让你做这样的事情:
$('div').click(function() {
$(this).animate({rotate: '+=45deg'});
});
编辑:
嘿,这是一个稍微清理过的原版版本,可以正常工作:
var x = 1;
$("#box").click(rotate);
function rotate() {
var angle = (90 * x);
$(this).css("-moz-transform", "rotate(" + angle + "deg)");
x++;
if (x > 4) x = 0;
}
firebug没有显示更改的原因是因为规范,其中说:"转换属性不会影响转换元素周围内容的流动." http://dev.w3.org/csswg/css3-transforms/
| 归档时间： |
|
| 查看次数： |
4187 次 |
| 最近记录： |