\u6b63\u516d\u9762\u4f53\u3092\u5165\u529b\u3057\u305f\u89d2\u5ea6\u306b\u56de\u3059JavaScript\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n
<\/p>\n
\uff11\u3001\u6b63\u516d\u9762\u4f53\u3092\u56f2\u3063\u3066\u3044\u308b\u30bf\u30b0\u306e\uff23\uff33\uff33\u306b\u57fa\u6e96\u70b9\u3092\u5b9a\u7fa9\u3059\u308b\u3002
\n\u3000\u3000\u4f8b\u3067\u306f\u3001div\u30bf\u30b0\uff08id=cube)\u306e\u30b9\u30bf\u30a4\u30eb\u306b\u300ctransform-origin\u300d\u3092
\n\u3000\u3000\u5b9a\u7fa9\u3057\u3066\u3001\u56de\u8ee2\u3059\u308b\u57fa\u6e96\u70b9\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u3002<\/p>\n
\uff12\u3001JavaScript\u306b\u3066\uff62transform\u300d\u306e\u5024\u3092\u5909\u66f4\u3059\u308b\u3002
\n\u3000\u4f8b\uff1adocument.getElementById(id).style.transform = ‘rotateX(“\u5165\u529b\u5024”deg) rotateY(“\u5165\u529b\u5024”deg)’<\/p>\n
\u2193\u4ee5\u4e0b\u304c\u30c6\u30b9\u30c8\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
\u25bcJavaScript<\/p>\n
<script type=\"text\/javascript\">\r\nwindow.onload = function () {\r\n\t\/* \u56de\u8ee2\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642 *\/\r\n\tdocument.querySelector(\"#rotation\").onclick = function () {angle()};\r\n\t\/* \u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642 *\/\r\n\tdocument.querySelector(\"#reset\").onclick = function () {angle_init()};\r\n\t\/* cube\u306e\u30c7\u30d5\u30a9\u30eb\u30c8 *\/\r\n\tfunction angle_init(){\r\n\t\tdocument.getElementById(\"tax\").value = \"-20\";\r\n\t\tdocument.getElementById(\"tay\").value = \"-20\";\r\n\t\t\/*document.getElementById(\"taz\").value = \"-20\";*\/\r\n\t\tangle();\r\n\t}\r\n\t\/* cube\u3092\u5165\u529b\u5024\u306b\u56de\u8ee2\u3055\u305b\u308b *\/\r\n\tfunction angle(){\r\n\t\tvar angleX = document.getElementById(\"tax\").value;\r\n\t\tvar angleY = document.getElementById(\"tay\").value;\r\n\t\tvar AngleRotate =\"\"\r\n\t\tif ( angleX == parseFloat(angleX))\r\n\t\t\t{AngleRotate = AngleRotate + \"rotateX(\" + angleX + \"deg)\"};\r\n\t\tif ( angleY == parseFloat(angleY))\r\n\t\t\t{AngleRotate = AngleRotate + \"rotateY(\" + angleY + \"deg)\"};\r\n\t\tif ( AngleRotate != \"\")\r\n\t\t\t{document.getElementById(\"cube\").style.transform = AngleRotate};\r\n\t}\r\n}\r\n<\/script>\r\n<\/pre>\n\u25bcCSS<\/p>\n
<style>\r\nbody{\r\n\twidth: 100%;\r\n\theight:100%;\r\n}\r\n#buttonBox{\r\n\tmargin:20px 10px;\r\n}\r\n#main {\r\n\tmargin:200px 200px;\r\n}\r\n#cube {\r\n\tmargin:0;\r\n\tposition: relative;\r\n\ttransform-style: preserve-3d;\r\n\ttransform-origin:100px 100px;\r\n\ttransform: rotateX(-20deg) rotateY(-20deg);\r\n}\r\n.surface {\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\twidth: 200px;\r\n \theight: 200px;\r\n\ttext-align: center;\r\n\tline-height: 200px;\r\n\tbox-sizing: border-box;\r\n\tborder: 2px solid black;\r\n}\r\ntext{\r\n\tfill:black;\r\n\tfont-size:130px;\r\n}\r\n#front {\r\n\ttransform: rotateY(0deg) translateZ(100px);\r\n\tbackground:red;\/*\u8d64*\/\r\n\topacity: 0.6;\r\n\r\n}\r\n#back {\r\n\ttransform: rotateX(180deg) translateZ(100px);\r\n\tbackground:pink;\/*\u30d4\u30f3\u30af*\/\r\n\topacity: 0.6;\r\n}\r\n#right{\r\n\ttransform: rotateY(90deg) translateZ(100px);\r\n\tbackground:blue;\/*\u9752*\/\r\n\topacity: 0.6;\r\n}\r\n#left {\r\n\ttransform: rotateY(-90deg) translateZ(100px);\r\n\tbackground:skyblue;\/*\u6c34\u8272*\/\r\n\topacity: 0.6;\r\n}\r\n#top {\r\n\ttransform: rotateX(90deg) translateZ(100px);\r\n\tbackground:green;\/*\u7dd1*\/\r\n\topacity: 0.6;\r\n}\r\n#bottom {\r\n\ttransform: rotateX(-90deg) translateZ(100px);\r\n\tbackground:yellow;\/*\u9ec4\u8272*\/\r\n\topacity: 0.6;\r\n}\r\n<\/style>\r\n<\/pre>\n\u25bcHTML<\/p>\n
<div id=\"wrap\">\r\n<!-- \u56de\u8ee2\u7387\u5165\u529b -->\r\n\t<form id=\"AngleBox\">\r\n\t\t<p><br \/>\u89d2\u5ea6\uff38\uff1a<input type=\"text\" name=\"tax\" id=\"tax\" value=\"-20\" title=\"\u89d2\u5ea6\uff38\">-360\u304b\u3089360\u3092\u5165\u529b\u4e0b\u3055\u3044<br \/><\/p>\r\n\t\t<p><br \/>\u89d2\u5ea6\uff39\uff1a<input type=\"text\" name=\"tay\" id=\"tay\" value=\"-20\" title=\"\u89d2\u5ea6\uff39\">-360\u304b\u3089360\u3092\u5165\u529b\u4e0b\u3055\u3044<br \/><\/p>\r\n<!--\t\t<p><br \/>\u89d2\u5ea6\uff3a\uff1a<input type=\"text\" name=\"taz\" id=\"taz\" value=\"-20\" title=\"\u89d2\u5ea6\uff3a\"><br \/><\/p>-->\r\n\t<\/form>\r\n\t<div id=\"buttonBox\">\r\n\t\t<button id=\"rotation\">\u56de\u3000\u8ee2<\/button>\r\n\t\t<button id=\"reset\">\u30ea\u30bb\u30c3\u30c8<\/button>\r\n\t<\/div>\r\n<!-- \u6b63\u516d\u9762\u4f53 -->\r\n\t<div id=\"main\">\r\n\t\t<div id=\"cube\">\r\n\t\t\t<svg class=\"surface\" id=\"front\" viewBox=\"-100 -100 200 200\" >\r\n\t\t\t\t<rect x=\"-100\" y=\"-100\" width=\"200\" hight=\"200\"><\/rect>\r\n\t\t\t\t<text x=\"-50\" y=\"40\">1<\/text>\r\n\t\t\t<\/svg>\r\n\t\t\t<svg class=\"surface\" id=\"back\" viewBox=\"-100 -100 200 200\" >\r\n\t\t\t\t<rect x=\"-100\" y=\"-100\" width=\"200\" hight=\"200\"><\/rect>\r\n\t\t\t\t<text x=\"-50\" y=\"40\">2<\/text>\r\n\t\t\t<\/svg>\r\n\t\t\t<svg class=\"surface\" id=\"right\" viewBox=\"-100 -100 200 200\" >\r\n\t\t\t\t<rect x=\"-100\" y=\"-100\" width=\"200\" hight=\"200\"><\/rect>\r\n\t\t\t\t<text x=\"-50\" y=\"40\">3<\/text>\r\n\t\t\t<\/svg>\r\n\t\t\t<svg class=\"surface\" id=\"left\" viewBox=\"-100 -100 200 200\" >\r\n\t\t\t\t<rect x=\"-100\" y=\"-100\" width=\"200\" hight=\"200\"><\/rect>\r\n\t\t\t\t<text x=\"-50\" y=\"40\">4<\/text>\r\n\t\t\t<\/svg>\r\n\t\t\t<svg class=\"surface\" id=\"top\" viewBox=\"-100 -100 200 200\" >\r\n\t\t\t\t<rect x=\"-100\" y=\"-100\" width=\"200\" hight=\"200\"><\/rect>\r\n\t\t\t\t<text x=\"-50\" y=\"40\">5<\/text>\r\n\t\t\t<\/svg>\r\n\t\t\t<svg class=\"surface\" id=\"bottom\" viewBox=\"-100 -100 200 200\" >\r\n\t\t\t\t<rect x=\"-100\" y=\"-100\" width=\"200\" hight=\"200\"><\/rect>\r\n\t\t\t\t<text x=\"-50\" y=\"40\">6<\/text>\r\n\t\t\t<\/svg>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n<\/pre>\n