divを回転させたいと思いました。多くの研究の後、jqueryライブラリが使われていない限り、CSS変換を使わずにdivを回転させるjavascriptはありません。問題は、私は小さなローテーションをしたい、それのためのライブラリを追加するme.Css変換のオプションではないIEで動作しませんです。JavaScriptを使用して回転
this example clockで分、時および秒はJavaScript自体を使用して回転します。
誰でもIE7で回転するdivを得るのを助けることができますか？
それはJavaScriptとjQueryのせずに生のCSSを使用して行うことが可能です：
$('#idElement').css({
/*modern browsers*/
'-moz-transform':'rotate(88deg)',
'-webkit-transform':'rotate(88deg)',
'-o-transform':'rotate(88deg)',
'-ms-transform':'rotate(88deg)'
/*IE:*/
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476), /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
});
あなたが最も間違い要素を変更することができますのような簡単なJavaScriptを使用して属性：
document.getElementById("idElement").setAttribute("-moz-transform", "rotate(88deg)");
ありがとう、これを見てください:) – slovaiwi
私はなぜそれを得ることはありませんその多くの簡単なソリューションがjQueryを使用していない？ここで
は、私はあなたがあなたのdivの写真を作成し、divの内側にこれらの写真を回転させるよりも、する必要があるJavaScriptが
$(document).ready(function(){
$('#element').easyRotate({
degrees: 45
});
});
を書かれた高速なスクリプトです。それは少し遅れてですが、私はこれを行うにはいくつかのコードを書かれている
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="div1">
<img name="img1" src="myimage1.jpg" id="img1">
<br>
<br>
<input type="button" value="Rotate this image" onclick="rotate()">
</div><script type="text/javascript">
var tally = 0;
function rotate() {
if (tally == 0) {
document.images["img1"].src= "myimage2.jpg";
tally = 1;
return true;
}
else {
document.images["img1"].src= "myimage1.jpg";
tally = 0;
return true;
}
}
</script>
</body>
</html>
ウェブサイトのターゲットであるDzokiは、ユーザーの大多数が非常に遅い接続性を提供するGPRSを持っています。私のサイトは全体で50kbですが、クライアント側では（拡張された、さらには）ライブラリが35kbなのでjQueryを使いたくありません。ほんの1回転が必要なので、jqueryを追加すると良いとは思われません。 – slovaiwi
上記のjavascriptは、divを回転させる代わりにdiv内の画像を反転します。限り、私は考えることができる、私はdivの絶対位置を変更するには数学ライブラリを使用する必要があります – slovaiwi
あなたはオンラインライブラリを使用することはできません？私はそれに精通していない。私は、あなたがその時より良い答えを得なければ、それのための別の解決策を見つけようとします。 – Dzoki
：私はそれを行うための簡単な例を作りました。
http://jsfiddle.net/rlemon/73DzT/
Object.prototype.rotate = function(d) {
var s = "rotate(" + d + "deg)";
if (this.style) { // regular DOM Object
this.style.MozTransform = s
this.style.WebkitTransform = s;
this.style.OTransform = s;
this.style.transform = s;
} else if (this.css) { // JQuery Object
this.css("-moz-transform", s);
this.css("-webkit-transform", s);
this.css("-o-transform", s);
this.css("transform", s);
}
this.setAttribute("rotation", d);
}
は、通常のオブジェクトまたはjQueryのオブジェクトを使用することができます。 「回転」という属性を格納して、現在の回転値を与えます。あなたはこれで遊び、あなたが思いつくことができるものを見ることができます。
素敵な仕事レモン。共有していただきありがとうございます！ –
これで、IEフィルタのサポートを追加する必要があります。3：D –
この時計では何も回転せず、JavaScriptだけではありません。各ドットごとに別々のdivがあり、JSは移動している手を構成する各divを移動するためにDOMにアクセスします。 – Quentin
Mmmmm http://css3pie.com/ tastes goooooood （ヒント：IEのCSS3） – Fred
@Fred私は、あなたがie8で何かをcss3pieを使って回転させようとします。 http://css3pie.com/documentation/supported-css3-features/ – Joonas