{"id":2071,"date":"2011-11-26T02:06:53","date_gmt":"2011-11-25T17:06:53","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=2071"},"modified":"2012-02-10T03:18:21","modified_gmt":"2012-02-09T18:18:21","slug":"%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7%e4%bd%bf%e7%94%a8%e5%8f%af%e8%83%bd-css%e3%81%ae%e3%81%bf%e4%bd%9c%e6%88%90-3d%e3%82%a2%e3%83%8b","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=2071","title":{"rendered":"\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u30b5\u30a4\u30c8\u3067\u4f7f\u7528\u53ef\u80fd css\u306e\u307f\u4f5c\u6210 3D\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},"content":{"rendered":"<p>\u524d\u56de\u306e\u8a18\u4e8b\u306e<\/p>\n<h3 style=\"margin-top: 1em;\"><a href=\"https:\/\/www.webcyou.com\/?p=931\">css3 3d \u56de\u8ee2 transform rotate()<\/a><span class=\"Apple-style-span\" style=\"font-size: 13px; font-weight: normal;\">\u3084<\/span><\/h3>\n<h3><a href=\"https:\/\/www.webcyou.com\/?p=942\">css3 3d \u56de\u8ee2 transform rotate() perspective\u8ffd\u52a0<\/a><\/h3>\n<p>\u3092\u53c2\u8003\u306b\u4eca\u56de\u306f\u3001CSS3\u3067\u7acb\u4f53\u7684\u306a\u56db\u89d2\u5f62\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308a\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\uff08Javascript\u307e\u305f\u306f\u753b\u50cf\u3092\u4e00\u5207\u4f7f\u7528\u3057\u307e\u305b\u3093\u3002\uff09<\/p>\n<p style=\"margin-top: 1em;\">\u3053\u3093\u306a\u611f\u3058\u306e\u3067\u3059\u306d\u3002\u30b5\u30a4\u30b3\u30ed\u306e\u3088\u3046\u306b6\u9762\u4f53\u306e\u56db\u89d2\u5f62\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ec15afbff0ade04199d07260eac2743c.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 0.55.42\" width=\"314\" height=\"292\" class=\"align none size-full wp-image-1575\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ec15afbff0ade04199d07260eac2743c.png 314w, https:\/\/www.webcyou.com\/wp-content\/uploads\/ec15afbff0ade04199d07260eac2743c-300x278.png 300w\" sizes=\"auto, (max-width: 314px) 100vw, 314px\" \/><\/p>\n<p style=\"margin-top: 1em;\">\u65e9\u901f\u30bd\u30fc\u30b9\u3092\u898b\u305f\u3044\u65b9\u306f<\/p>\n<p style=\"margin-top: 1em;\"><a href=\"http:\/\/webcyou.com\/demo\/css3\/transform\/test02.html\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u00a0<br \/>\n \u00a0http:\/\/webcyou.com\/demo\/css3\/transform\/test02.html<\/a><\/p>\n<p style=\"margin-top: 1em;\">\u00a0<\/p>\n<style type=\"text\/css\">\n#viewArea{width:160px;height:160px;margin:80px auto}#cube div{position:absolute;height:160px;width:160px;border:3px solid #222;background:rgba(22,122,203,0.7);text-align:center;font-size:130px;color:#fff;font-family:Times}#cube{-webkit-animation-name:animation;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:3s;-webkit-transform-style:preserve-3d;-webkit-transform-origin:80px 80px 0;-webkit-transform:rotateY(55deg) rotateX(51deg)}#cube .one{-webkit-transform:translateZ(80px)}#cube .two{-webkit-transform:rotateX(-90deg) translateZ(80px)}#cube .three{-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(80px)}#cube .four{-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(80px)}#cube .five{-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(80px)}#cube .six{-webkit-transform:rotateY(90deg) translateZ(80px)}@-webkit-keyframes animation{from,to{}16%{-webkit-transform:rotateY(-45deg)}33%{-webkit-transform:rotateY(-110deg) rotateZ(185deg)}50%{-webkit-transform:rotateY(125deg) rotateZ(235deg)}66%{-webkit-transform:rotateY(235deg) rotateX(205deg)}83%{-webkit-transform:rotateX(335deg)}}.notes{font-size:12px;color:#666;text-align:center}\n<\/style>\n<div id=\"viewArea\">\n<div id=\"cube\">\n<div class=\"one\">1<\/div>\n<div class=\"two\">2<\/div>\n<div class=\"three\">3<\/div>\n<div class=\"four\">4<\/div>\n<div class=\"five\">5<\/div>\n<div class=\"six\">6<\/div>\n<\/p>\n<\/div>\n<\/div>\n<p class=\"notes\">\u203bwebkit\u7cfb\u30d6\u30e9\u30a6\u30b6\uff08safari,googleChrome\u7b49\uff09\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h4 style=\"margin-top: 1em;\"><strong>\uff11.\uff11\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u00a0<\/strong><\/h4>\n<p style=\"margin-top: 1em;\">\u307e\u305a\u57fa\u672c\u3068\u306a\u308b\uff11\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u3092\u884c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/0266e36a5885c5d861da77bda35e2e2d.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.35.00\" width=\"212\" height=\"207\" class=\"align none size-full wp-image-1576\" \/><\/p>\n<p style=\"margin-top: 1em;\">\u3068\u540c\u6642\u306b\u30013D\u51e6\u7406\u3092\u884c\u3048\u308b\u7a7a\u9593\u3082\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\">transform-origin\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8ffd\u52a0\u3057\u30012D\u307e\u305f\u306f3D\u52b9\u679c\u306e\u539f\u70b9\u306e\u4f4d\u7f6e\u3092\u6c7a\u3081\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\">\uff08\u4eca\u56de\u306fwebkit\u306e\u307f\u9069\u5fdc\u306e-webkit-\u30d7\u30ea\u30d5\u30a3\u30c3\u30af\u30b9\u8ffd\u52a0\u3067\u8a2d\u5b9a\u3057\u3066\u3044\u304d\u307e\u3059\u3002\uff09<\/p>\n<p style=\"margin-top: 1em;\">\u307e\u305f\u3001transform-style preserve-3d\u8ffd\u52a0\u30673D\u7a7a\u9593\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>HTML<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;viewArea&quot;&gt;\r\n&lt;div id=&quot;cube&quot;&gt;\r\n&lt;div class=&quot;one&quot;&gt;1&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong>\u8868\u793a\u30a8\u30ea\u30a2\uff08\u4efb\u610f\uff09<\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#viewArea{\r\nwidth:160px;\r\nheight:160px;\r\nmargin:80px auto;\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong>\u9762\u30a8\u30ea\u30a2 \uff08\u30c7\u30b6\u30a4\u30f3\u3001\u30b5\u30a4\u30ba\u8abf\u6574\u4efb\u610f\uff09<\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n#cube div{\r\nposition:absolute;\r\nheight:160px;\r\nwidth:160px;\r\nborder:3px solid #222;\r\nbackground:rgba(22, 122, 203,0.7);\r\ntext-align:center;\r\nfont-size:130px;\r\ncolor:#fff;\r\nfont-family:Times;\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong>\u9762\u30a8\u30ea\u30a2\u89aa\u8981\u7d20<\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n#cube{\r\n-webkit-transform-style:preserve-3d;\r\n-webkit-transform-origin: 80px 80px 0;\r\n}<\/pre>\n<\/p>\n<h4 style=\"margin-top: 1em;\"><strong>\uff12.\uff12\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u00a0<\/strong><\/h4>\n<p style=\"margin-top: 1em;\">\u7d9a\u3044\u3066\uff12\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u3092\u884c\u3063\u3066\u3044\u304f\u306e\u3067\u3059\u304c\u3001\u4eca\u306e\u307e\u307e\u3060\u3068\u78ba\u8a8d\u304c\u3057\u3065\u3089\u3044\u306e\u3067<\/p>\n<p>\u89aa\u8981\u7d20\u3067\u3042\u308b \u300c<strong>#cube \u300d<\/strong>\u306b <strong>rotateY<\/strong> \u3068\u00a0<strong>rotateX<\/strong>\u3067\u89d2\u5ea6\u3092\u4ed8\u3051\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n#cube{\r\n-webkit-transform: rotateY(55deg) rotateX(51deg);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\uff12\u756a\u76ee\u304c\u9762\u304c\u4ed8\u304f\u5834\u6240\u306f\u4ee5\u4e0b\u306e\u5834\u6240\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>\u203b1<\/strong><\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ced14400ed66d9a406099f27ee8c2ec1.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.42.07\" width=\"322\" height=\"281\" class=\"align none size-full wp-image-1577\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ced14400ed66d9a406099f27ee8c2ec1.png 322w, https:\/\/www.webcyou.com\/wp-content\/uploads\/ced14400ed66d9a406099f27ee8c2ec1-300x261.png 300w\" sizes=\"auto, (max-width: 322px) 100vw, 322px\" \/><\/p>\n<p style=\"margin-top: 1em;\">\u307e\u305a\u3001\uff12\u756a\u76ee\u306e\u9762\u3068\u3057\u3066div class\u00a0two\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>HTML<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;viewArea&quot;&gt;\r\n&lt;div id=&quot;cube&quot;&gt;\r\n&lt;div class=&quot;one&quot;&gt;1&lt;\/div&gt;\r\n&lt;div class=&quot;two&quot;&gt;2&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\u3053\u306e\u6bb5\u968e\u3060\u3068\u307e\u3060\u3053\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/46eb171b3ab4cdaea2c58f2ae1f43839.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/46eb171b3ab4cdaea2c58f2ae1f43839.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 3.33.12\" width=\"265\" height=\"175\" class=\"alignnone size-full wp-image-1607\" \/><\/a><\/p>\n<p style=\"margin-top: 1em;\">\u3053\u3053\u3067\u3001<strong>\u4e00\u756a\u76ee\u306e\u9762div class one<\/strong> \u306b\u5bfe\u3057\u3066<strong>transform: translateZ(80px)<\/strong>\u3092\u6307\u5b9a\u3057\u3001\uff12\u756a\u76ee\u306e\u9762\u3068\u96e2\u3057\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .one{\r\n-webkit-transform: translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/9b48f6dde1124f4d9c9a609ac8461d12.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.44.58\" width=\"326\" height=\"257\" class=\"align none size-full wp-image-1580\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/9b48f6dde1124f4d9c9a609ac8461d12.png 326w, https:\/\/www.webcyou.com\/wp-content\/uploads\/9b48f6dde1124f4d9c9a609ac8461d12-300x236.png 300w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/p>\n<p style=\"margin-top: 1em;\">\u3055\u3089\u306b\uff12\u756a\u76ee\u306e\u9762\u3092-90\u5ea6\u50be\u3051\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\">\uff08\u53f3\u306e\u753b\u50cf\u306f<strong>transform: translateZ(80px)\u3092\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u3067\u3059\u3002<\/strong>\uff09<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/a8e5cc84976684ecbb09b8c71b1206b1.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.44.20\" width=\"323\" height=\"235\" class=\"align none size-full wp-image-1579\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/a8e5cc84976684ecbb09b8c71b1206b1.png 323w, https:\/\/www.webcyou.com\/wp-content\/uploads\/a8e5cc84976684ecbb09b8c71b1206b1-300x218.png 300w\" sizes=\"auto, (max-width: 323px) 100vw, 323px\" \/><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/11866101fecb69e6a97797b3ea880e93.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.43.59\" width=\"277\" height=\"216\" class=\"align none size-full wp-image-1578\" \/><\/p>\n<p style=\"margin-top: 1em;\">\u3055\u3089\u306b\uff12\u756a\u76ee\u306e\u9762(.two)\u306b\u3082<strong>transform: translateZ(80px)<\/strong>\u3092\u6307\u5b9a\u3057\u4ee5\u4e0b\u306e\u90e8\u5206\u3078\u6301\u3063\u3066\u304d\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .two{\r\n-webkit-transform: rotateX(-90deg) translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><strong>\uff12\u756a\u76ee\u306e\u9762\u5b8c\u6210\u56f3<\/strong><\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ced14400ed66d9a406099f27ee8c2ec1.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.42.07\" width=\"322\" height=\"281\" \/><\/p>\n<h4 style=\"margin-top: 1em;\"><strong>\uff13.\uff13\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u00a0<\/strong><\/h4>\n<p style=\"margin-top: 1em;\">\u7d9a\u3044\u3066\u3001\uff13\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\">\uff12\u756a\u76ee\u306e\u9762\u540c\u69d8\u3001<strong>transform: translateZ(80px)<\/strong>\u3092\u6307\u5b9a\u3057<\/p>\n<p style=\"margin-top: 1em;\">\uff12\u756a\u76ee\u306e\u9762\u3068\u53cd\u5bfe\u306e\u5024\u3001<strong>transform: rotateX(90deg)<\/strong>\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>HTML<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;viewArea&quot;&gt;\r\n&lt;div id=&quot;cube&quot;&gt;\r\n&lt;div class=&quot;one&quot;&gt;1&lt;\/div&gt;\r\n&lt;div class=&quot;two&quot;&gt;2&lt;\/div&gt;\r\n&lt;div class=&quot;three&quot;&gt;3&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .three{\r\n-webkit-transform: rotateX(90deg) translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/96ed46b09d757ca8d6eee11272d77d4c.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.51.04\" width=\"384\" height=\"298\" class=\"align none size-full wp-image-1581\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/96ed46b09d757ca8d6eee11272d77d4c.png 384w, https:\/\/www.webcyou.com\/wp-content\/uploads\/96ed46b09d757ca8d6eee11272d77d4c-300x232.png 300w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/p>\n<p style=\"margin-top: 1em;\">\u66f4\u306b\u3001\u9762\u306e\u5411\u304d\u3092\u5909\u3048\u308b\u305f\u3081<strong>transform: rotateY(90deg)<\/strong>\u3092\u52a0\u3048\u3066\u5b8c\u6210\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .three{\r\n-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/3b1349e30e4e1dc3e9aac2fa58768f57.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.51.56\" width=\"348\" height=\"295\" class=\"align none size-full wp-image-1582\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/3b1349e30e4e1dc3e9aac2fa58768f57.png 348w, https:\/\/www.webcyou.com\/wp-content\/uploads\/3b1349e30e4e1dc3e9aac2fa58768f57-300x254.png 300w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/p>\n<h4 style=\"margin-top: 1em;\"><strong>\uff14.\uff14\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u00a0<\/strong><\/h4>\n<p style=\"margin-top: 1em;\">\u7d9a\u3044\u3066\uff14\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u3002\u4f8b\u306e\u3054\u3068\u304fHTML\u306bdiv\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>HTML<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;\/pre&gt;\r\n&lt;div id=&quot;viewArea&quot;&gt;\r\n&lt;div id=&quot;cube&quot;&gt;\r\n&lt;div class=&quot;one&quot;&gt;1&lt;\/div&gt;\r\n&lt;div class=&quot;two&quot;&gt;2&lt;\/div&gt;\r\n&lt;div class=&quot;three&quot;&gt;3&lt;\/div&gt;\r\n&lt;div class=&quot;four&quot;&gt;4&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;pre&gt;<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\u8ffd\u52a0\u3057\u305f\u72b6\u614b\u306f\u3053\u306e\u3088\u3046\u306a\u72b6\u614b\u3060\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/a4216c9254166ac1ace818303a91c8ff.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.57.33\" width=\"358\" height=\"287\" class=\"align none size-full wp-image-1583\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/a4216c9254166ac1ace818303a91c8ff.png 358w, https:\/\/www.webcyou.com\/wp-content\/uploads\/a4216c9254166ac1ace818303a91c8ff-300x240.png 300w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/p>\n<p style=\"margin-top: 1em;\">\u3053\u308c\u307e\u305f\u4f8b\u306e\u3054\u3068\u304f\u3001<strong>transform: translateZ(80px)<\/strong>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .four {\r\n-webkit-transform: translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\u3053\u306e\u4f4d\u7f6e\u306b\u304f\u308b\u306e\u3067\u3001<strong>transform:\u00a0rotateY(180deg)<\/strong>\u3067\uff11\u756a\u76ee\u306e\u53cd\u5bfe\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/08be3cd6afdb3274cca383203c2cd1f2.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.58.07\" width=\"357\" height=\"294\" class=\"align none size-full wp-image-1584\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/08be3cd6afdb3274cca383203c2cd1f2.png 357w, https:\/\/www.webcyou.com\/wp-content\/uploads\/08be3cd6afdb3274cca383203c2cd1f2-300x247.png 300w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">-webkit-transform: rotateY(180deg) translateZ(80px);<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\u3084\u3084\u5b8c\u4e86\u3067\u3059\u304c\u3001\u3055\u3089\u306b\u56de\u8ee2\u3055\u305b\uff14\u756a\u76ee\u306e\u5411\u304d\u3092\u5909\u3048\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/f4002e7fef7f06e853a77a5c3602327b.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.58.24\" width=\"358\" height=\"299\" class=\"align none size-full wp-image-1585\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/f4002e7fef7f06e853a77a5c3602327b.png 358w, https:\/\/www.webcyou.com\/wp-content\/uploads\/f4002e7fef7f06e853a77a5c3602327b-300x250.png 300w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">-webkit-transform: rotateY(180deg) rotateZ(90deg)  translateZ(80px);<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/e1b83e4360a288dd9c991200e3ad1967.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 1.58.30\" width=\"373\" height=\"321\" class=\"align none size-full wp-image-1586\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/e1b83e4360a288dd9c991200e3ad1967.png 373w, https:\/\/www.webcyou.com\/wp-content\/uploads\/e1b83e4360a288dd9c991200e3ad1967-300x258.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/p>\n<p style=\"margin-top: 1em;\">\uff14\u756a\u76ee\u306e\u9762\u306f\u3053\u308c\u3067\u5b8c\u6210\u3002<\/p>\n<h4 style=\"margin-top: 1em;\"><strong>\uff15.\uff15\u756a\u76ee\u306e\u9762<\/strong><\/h4>\n<p>\uff15\u756a\u76ee\u306e\u9762\u306e\u4f5c\u6210\u3002\u307e\u305f\u307e\u305f\u4f8b\u306e\u3054\u3068\u304fHTML\u306bdiv\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>HTML<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;viewArea&quot;&gt;\r\n&lt;div id=&quot;cube&quot;&gt;\r\n&lt;div class=&quot;one&quot;&gt;1&lt;\/div&gt;\r\n&lt;div class=&quot;two&quot;&gt;2&lt;\/div&gt;\r\n&lt;div class=&quot;three&quot;&gt;3&lt;\/div&gt;\r\n&lt;div class=&quot;four&quot;&gt;4&lt;\/div&gt;\r\n&lt;div class=&quot;five&quot;&gt;5&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\uff14\u756a\u76ee\u306e\u9762\u3068\u540c\u69d8\u3001\u3053\u3053\u304b\u3089\u30b9\u30bf\u30fc\u30c8\u3067\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ff84667053fed7d3233368ad15dab33e.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ff84667053fed7d3233368ad15dab33e.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 2.39.33\" width=\"325\" height=\"281\" class=\"alignnone size-full wp-image-1592\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/ff84667053fed7d3233368ad15dab33e.png 325w, https:\/\/www.webcyou.com\/wp-content\/uploads\/ff84667053fed7d3233368ad15dab33e-300x259.png 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/p>\n<p style=\"margin-top: 1em;\">\u3055\u3059\u304c\u306b\u3082\u3046\u899a\u3048\u307e\u3057\u305f\u306d\u3002<strong>transform: translateZ(80px)<\/strong>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<p>\uff11\u756a\u76ee\u306e\u9762\u307e\u3067\u3082\u3063\u3066\u304d\u307e\u3059\u3002<br \/>\n <a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/5bee21a5421a793e91c624be36b67928.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/5bee21a5421a793e91c624be36b67928.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 2.39.49\" width=\"330\" height=\"301\" class=\"alignnone size-full wp-image-1593\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/5bee21a5421a793e91c624be36b67928.png 330w, https:\/\/www.webcyou.com\/wp-content\/uploads\/5bee21a5421a793e91c624be36b67928-300x273.png 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p style=\"margin-top: 1em;\">\uff15\u756a\u76ee\u306e\u9762\u3092\u4efb\u610f\u306e\u4f4d\u7f6e\u307e\u3067\u6301\u3063\u3066\u3044\u304f\u305f\u3081\u3001\u4f8b\u306e\u3054\u3068\u304f<strong>rotateY(-90deg)\u3092\u8a2d\u5b9a<\/strong><\/p>\n<p><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .five {\r\n-webkit-transform:rotateY(-90deg) translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/803ae468cd618ad8762e6927abf1595a.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/803ae468cd618ad8762e6927abf1595a.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 2.40.08\" width=\"325\" height=\"323\" class=\"alignnone size-full wp-image-1594\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/803ae468cd618ad8762e6927abf1595a.png 325w, https:\/\/www.webcyou.com\/wp-content\/uploads\/803ae468cd618ad8762e6927abf1595a-150x150.png 150w, https:\/\/www.webcyou.com\/wp-content\/uploads\/803ae468cd618ad8762e6927abf1595a-300x298.png 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/p>\n<p style=\"margin-top: 5em;\">\u307e\u305f\u3001\u4f8b\u306e\u3054\u3068\u304f\u3067\u3059\u304c\u3001\u3055\u3089\u306b\u5411\u304d\u3092\u5909\u3048\u308b\u305f\u3081<strong>rotateZ(90deg)<\/strong>\u3092\u8ffd\u52a0\u3057\u5b8c\u6210\u3067\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\"><strong>CSS<\/strong><\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .five {\r\n-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\"><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/380801c88c2967323cca1df53a1fdb92.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/380801c88c2967323cca1df53a1fdb92.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 2.40.16\" width=\"326\" height=\"315\" class=\"alignnone size-full wp-image-1595\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/380801c88c2967323cca1df53a1fdb92.png 326w, https:\/\/www.webcyou.com\/wp-content\/uploads\/380801c88c2967323cca1df53a1fdb92-300x289.png 300w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/a><\/p>\n<h4 style=\"margin-top: 1em;\"><strong>\uff16.\uff16\u756a\u76ee\u306e\u9762<\/strong><\/h4>\n<p>\u3082\u3046\u3053\u3053\u307e\u3067\u304f\u308b\u3068\u3055\u3059\u304c\u306b\u308f\u304b\u308a\u307e\u3059\u3088\u306d\u3002\uff15\u756a\u76ee\u306e\u9762\u306e\u53cd\u5bfe\u5074\u306b\u8a2d\u5b9a\u3057\u305f\u3044\u306e\u3067\u3001<br \/>\n \uff15\u756a\u76ee\u306e\u9762\u3067\u8a2d\u5b9a\u3057\u305f<strong>rotateY(-90deg)<\/strong>\u3092<strong>rotateY(90deg)<\/strong>\u306b\u3059\u308b\u3060\u3051\u3067OK\u3067\u3059\u3002<\/p>\n<p style=\"margin-top: 1em;\">HTML<\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;div id=&quot;viewArea&quot;&gt;\r\n&lt;div id=&quot;cube&quot;&gt;\r\n&lt;div class=&quot;one&quot;&gt;1&lt;\/div&gt;\r\n&lt;div class=&quot;two&quot;&gt;2&lt;\/div&gt;\r\n&lt;div class=&quot;three&quot;&gt;3&lt;\/div&gt;\r\n&lt;div class=&quot;four&quot;&gt;4&lt;\/div&gt;\r\n&lt;div class=&quot;five&quot;&gt;5&lt;\/div&gt;\r\n&lt;div class=&quot;six&quot;&gt;6&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\u00a0<\/p>\n<p style=\"margin-top: 1em;\">CSS<\/p>\n<p><pre class=\"brush: plain; title: ; notranslate\" title=\"\">#cube .six {\r\n-webkit-transform: rotateY(90deg) translateZ(80px);\r\n}<\/pre>\n<\/p>\n<p style=\"margin-top: 1em;\">\u00a0<\/p>\n<p style=\"margin-top: 1em;\"><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/46838ad2facf8500004a1038d9b0c08b.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/46838ad2facf8500004a1038d9b0c08b.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2011-10-31 2.40.47\" width=\"338\" height=\"312\" class=\"alignnone size-full wp-image-1596\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/46838ad2facf8500004a1038d9b0c08b.png 338w, https:\/\/www.webcyou.com\/wp-content\/uploads\/46838ad2facf8500004a1038d9b0c08b-300x276.png 300w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/a><\/p>\n<p style=\"margin-top: 5em;\">\u3053\u308c\u3067\u3064\u3044\u306b\u5b8c\u6210\uff01<br \/>\n <a href=\"http:\/\/webcyou.com\/demo\/css3\/transform\/test02.html\" target=\"_blank\">\u30c7\u30e2\u30da\u30fc\u30b8\u00a0<br \/>\n \u00a0http:\/\/webcyou.com\/demo\/css3\/transform\/test02.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u56de\u306e\u8a18\u4e8b\u306e css3 3d \u56de\u8ee2 transform rotate()\u3084 css3 3d \u56de\u8ee2 transform rotate() perspective\u8ffd\u52a0 \u3092\u53c2\u8003\u306b\u4eca\u56de\u306f\u3001CSS3\u3067\u7acb\u4f53\u7684\u306a\u56db\u89d2\u5f62\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[171,167,177,40,166,37,106,178],"class_list":{"0":"post-2071","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-32","7":"tag-android","8":"tag-css","9":"tag-css3","10":"tag-ios-sdk","11":"tag-iphone","12":"tag-iphone-","14":"tag-178"},"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/2071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2071"}],"version-history":[{"count":4,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/2071\/revisions"}],"predecessor-version":[{"id":2985,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/2071\/revisions\/2985"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}