个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
28
4
我有这个代码:
<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 添加宽度和背景颜色即可查看其是否正常工作。
Here's an example我把悬停时旋转的东西放在一起:
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);
}
还有一些info how to use the css3 transform property
我发现有一个 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 不显示更改的原因是因为规范，它说:“transform 属性不会影响已转换元素周围的内容流。” http://dev.w3.org/csswg/css3-transforms/
关于javascript - CSS 变换 : rotate only works on image，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9777372/
28
4
0
我有这部分代码将 div 围绕一个圆圈对齐: angle = 0; mangle = 0; for(i = 1; i<= count; i++) { $("#p" +i).css
为什么平衡得到一个AVL树的过程叫做旋转 ? (当你在它时，什么是 单 和 双 旋转？) 我的每一本教科书都公然使用这个词，没有任何解释。 最佳答案 这是在你的树的子树中改变根的操作，这是非常简单的操
作为进入处理的一个小作业，我必须编写一些代码才能获得以下内容: 使用 public void setup() { size(300,200); noFill(); rect(100,
我遇到了 Google Chrome 控制台报告的问题。我使用的是 Ubuntu 12.04。控制台中的问题是: Uncaught TypeError: Cannot read propert
在统一编辑器中，当我启用“Pivot”时，游戏对象将围绕“枢轴点”位置旋转，当我启用“Center”时，游戏对象将围绕“中心点”旋转 但是如果我使用脚本旋转，它总是围绕“中心点”旋转，例如，这是我的场
rotate() 算法会从左边选择序列的元素。它的工作机制如图 1 所示。 图 1 rotate()算法的工作方式(点此查看大图) 为了理解如何旋转序列，可以将序列中的元素想象成手镯上的珠子。rota
在三个JS中，是否可以用鼠标旋转对象而不是用OrbitControls.js旋转相机( https://threejs.org/docs/#examples/controls/OrbitControl
我正在学习 CSS 过渡和转换。这是 HTML: Transformatons and Transitions animate animate2 d
我们有一个图像，它似乎在旋转时消失了一秒钟。这个问题存在于 IE8 中，但在 IE9 和其他支持 HTML5 的浏览器中工作正常。我们使用了 jQuery 旋转插件。 HTML CSS #obj {
作为评估的一部分，我被赋予了这项任务......“‘旋转’按钮应该翻转元素的纵横比。” 为了完成这个，我定位了元素并切换了一个类名(旋转)，然后添加了这个 CSS... .main-inner.rot
我从 Unity 插件 Final IK 中看到了这行代码。 整个函数是这样的: //Limits rotation to a single degree of freedom (along axis
我正在尝试在动画关键帧内同时应用 -webkit-filter:hue-rotate() 和 -webkit-transform:rotate()。不幸的是，即使是 Chrome Canary 也无法
我正在尝试制作看起来像这样的波斯尼亚和黑塞哥维那国旗。 我正在努力实现星星的排列方式。它们位于 45 度倾斜轴上，但星星本身没有旋转。 以下是我正在尝试的最低限度代码，但它也会旋转星星。 有什么办法可
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时，出现以下错误: AttributeError: 'scipy.spatial.transform.
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时，出现以下错误: AttributeError: 'scipy.spatial.transform.
我的问题是我使用支持 CSS2 和 javascript 但不支持 css3 的 html 到 pdf 生成器 (acts_as_flying_saucer)，所以我不能使用 transform: r
我做了以下转换: // Translate my cube to origin myCubeModelMatrix = glm::translate( myCubeModelMatrix, vec3(
我正在将一些基于 PIL 的代码转换为 NumPy，但我发现 skimage.transform.rotate函数比 PIL 的 Image.rotate 慢显着。 作为一个粗略的比较，使用 skim
前言 .我知道过去曾多次问过这个问题，但没有一个解决方案实际上对我有用。自从提出类似问题(根据耗时过滤的 Google 搜索)以来，也已经有好几年了，因此大多数较旧的答案都已过时。如果有任何方法可以让
我试图将元素从其起始旋转点旋转 360 度，而不是从 0deg。例如，如果起点是 90deg，它会从 90deg 旋转到 90deg(整圈)。 我的目标是使用简单的@keyframes 动画来旋转元素
我是一名优秀的程序员,十分优秀！