スタイルシート(CSS3)でDIV要素を回転して表示するサンプルを書いてみた。
JavaScript で DOM element の style プロパティ経由で transform や transformOrigin プロパティをセットしている。
⇒ locating and transforming by JavaScript and CSS
以下のウェブブラウザで動作確認済み。
- Mozilla Firefox 6
- Google Chrome 13
- Apple Safari 5.1
- Microsoft Internet Explorer 9
- Opera 11.50
IE9 は Windows Vista 上で、それ以外は Windows XP 上で動作するのを確認。
サンプルコードの中身。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>locating and transforming by JavaScript and CSS</title>
<style type="text/css">
#myfield {
border: solid 3px #000000;
width: 500px;
height: 500px;
position: relative;
}
.myitem {
border: dashed 2px #ff0000;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script type="text/javascript">
function locate(elem, props){
elem.setAttribute("class", "myitem");
for(var k in props){
if(k == 'transform'){
var t = props[k];
elem.style.transform = t; // transform : W3C
elem.style.webkitTransform = t; // -webkit-transform : WebKit/Safari/Chrome
elem.style.MozTransform = t; // -moz-transform : Mozilla Firefox/Gecko
elem.style.msTransform = t; // -ms-transform : Internet Explorer
elem.style.OTransform = t; // -o-transform : Opera
}else if(k == 'transformOrigin'){
var t = props[k];
elem.style.transformOrigin = t; // transform-origin : W3C
elem.style.webkitTransformOrigin = t; // -webkit-transform-origin : WebKit/Safari/Chrome
elem.style.MozTransformOrigin = t; // -moz-transform-origin : Mozilla Firefox/Gecko
elem.style.msTransformOrigin = t; // -ms-transform-origin : Internet Explorer
elem.style.OTransformOrigin = t; // -o-transform-origin : Opera
}else{
elem.style[k] = props[k];
}
}
}
window.onload = function() {
try{
var myfield = document.getElementById('myfield');
var divs = [
{left:"100px", top:"100px", width:"50px", height:"30px"},
{left:"200px", top:"200px", width:"80px", height:"50px", transform:"rotate(60deg)"},
{left:"0px", top:"0px", width:"100px", height:"100px", transform:"rotate(30deg)", transformOrigin:"0% 0%"},
];
for(var i=0; i<divs.length; i++){
var e = document.createElement("div");
myfield.appendChild(e);
locate(e, divs[i]);
}
}catch(ex){
alert(ex);
}
}
</script>
</head>
<body>
<h1>locating and transforming by JavaScript and CSS</h1>
<div id="myfield"></div>
</body>
</html>
ウェブブラウザ別 transform プロパティ名:
| CSS プロパティ名 | DOM Style プロパティ名 | |
|---|---|---|
| W3C Specification | transform | transform |
| WebKit/Safari/Chrome | -webkit-transform | webkitTransform |
| Mozilla Firefox/Gecko | -moz-transform | MozTransform |
| MS Internet Explorer | -ms-transform | msTransform |
| Opera | -o-transform | OTransform |
ウェブブラウザ別 transform-origin プロパティ名:
| CSS プロパティ名 | DOM Style プロパティ名 | |
|---|---|---|
| W3C Specification | transform-origin | transformOrigin |
| WebKit/Safari/Chrome | -webkit-transform-origin | webkitTransformOrigin |
| Mozilla Firefox/Gecko | -moz-transform-origin | MozTransformOrigin |
| MS Internet Explorer | -ms-transform-origin | msTransformOrigin |
| Opera | -o-transform-origin | OTransformOrigin |
-webkit-transform の DOM Style プロパティ名は webkitTransform でも WebkitTransform でも使える(最初のwが大文字だったり小文字)けど、 Apple のサイト Safari CSS Visual Effects Guide: Transforms によると小文字wではじまる webkitTransform らしい。
以下、参考資料。
W3C Specification:
- CSS 2D Transforms Module Level 3
- CSS3 Values and Units - 3.4.5. Angles
- Document Object Model CSS - Interface ElementCSSInlineStyle (introduced in DOM Level 2)
WebKit/Safari/Chrome:
- Surfin' Safari - Blog Archive » CSS Transforms
- Safari Graphics, Media, and Visual Effects Coding How-To's
- Safari DOM Additions Reference
- Safari CSS Visual Effects Guide: Transforms
- Chromium Blog: Web Graphics – Past, Present and Future (3Dだけど参考までに)
Mozilla Firefox/Gecko:
- CSS transforms の利用 - MDN Docs
- -moz-transform - MDN Docs
- -moz-transform-origin - MDN Docs
- element.style - MDN Docs
Microsoft Internet Explorer:
- msTransform Property (CSSStyleDeclaration, currentStyle, style, ...)
- msTransformOrigin Property (CSSStyleDeclaration, currentStyle, style, ...)
- Matrix Filter (A, ABBR, ACRONYM, ...)
Opera:
- CSS3 transitions and 2D transforms - Dev.Opera
- Opera: CSS3 2D Transforms support in Opera Presto 2.9
- Web specifications support in Opera products
Opera は JavaScript で CSS Transform する公式な文書がみつからんかった。どこだろー。
tags: javascript css
Posted by NI-Lab. (@nilab)
