{"id":1144,"date":"2016-09-05T11:58:03","date_gmt":"2016-09-05T02:58:03","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1144"},"modified":"2016-09-05T11:58:03","modified_gmt":"2016-09-05T02:58:03","slug":"3d%e5%a3%81%e9%9d%a2%ef%bc%88wall%ef%bc%89%e5%9e%8b%e3%83%95%e3%82%a9%e3%83%88%e3%82%ae%e3%83%a3%e3%83%a9%e3%83%aa%e3%83%bc","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=1144","title":{"rendered":"3D\u58c1\u9762\uff08WALL\uff09\u578b\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc"},"content":{"rendered":"<p>\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u30af\u30ea\u30c3\u30af\u578b\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3001\u3044\u308f\u3086\u308b\u30013D WALL \u578b\u306a\u3069\u3068\u547c\u3070\u308c\u3066\u3044\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u3001\u5965\u307e\u3063\u305f\u4e2d\u592e\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u3001\u4e21\u5074\u304b\u3089\u9060\u8fd1\u611f\u3092\u3082\u3063\u3066\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u8fd1\u3065\u3044\u3066\u3044\u304f\u3088\u3046\u306b\u898b\u3048\u308b\u3002\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u306f\u3001\uff15\u5217\uff13\u884c\u306e\u3082\u306e\u3067\u3042\u308b\u304c\u3001\u3082\u3063\u3068\u884c\u5217\u6570\u3092\u5897\u3084\u3057\u3066\u3001\u753b\u9762\u3044\u3063\u3071\u3044\u306b\u4e26\u3079\u305f\u3089\u8feb\u529b\u3042\u308b\u3082\u306e\u306b\u306a\u308b\u3067\u3042\u308d\u3046\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09<\/h4>\n<p>\u3000\u3053\u306e\u30b5\u30f3\u30d7\u30eb\u306f\u3001\u30a4\u30e1\u30fc\u30b8\u3092\u793a\u3057\u305f\u3082\u306e\u3067\u3001\u30af\u30ea\u30c3\u30af\u306b\u53cd\u5fdc\u3057\u307e\u305b\u3093\u3002<br \/>\n\u3000\u5225\u30da\u30fc\u30b8\u306e\u3001<a href=\"http:\/\/css.programming.jp\/pages\/3dwall.html\" title=\"3d Wall type photogallery\" target=\"_blank\"><b>\u30b5\u30f3\u30d7\u30eb<\/b>\u3092\u898b\u3066\u304f\u3060\u3055\u3044<\/a>\u3002<\/p>\n<p><!-- HTML --><\/p>\n<div id=\"stage\">\n<div id=\"leftpart\">\n<div class=\"row1\">\n      <a href=\"#pic1\"><\/p>\n<div id=\"p1\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s1.jpg\" \/><\/div>\n<p><\/a><br \/>\n      <a href=\"#pic2\"><\/p>\n<div id=\"p2\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s2.jpg\" \/><\/div>\n<p><\/a>\n    <\/div>\n<div class=\"row2\">\n      <a href=\"#pic6\"><\/p>\n<div id=\"p6\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s6.jpg\" \/><\/div>\n<p><\/a><br \/>\n      <a href=\"#pic7\"><\/p>\n<div id=\"p7\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s7.jpg\" \/><\/div>\n<p><\/a>\n    <\/div>\n<div class=\"row3\">\n      <a href=\"#pic11\"><\/p>\n<div id=\"p11\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s11.jpg\" \/><\/div>\n<p><\/a><br \/>\n      <a href=\"#pic12\"><\/p>\n<div id=\"p12\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s12.jpg\" \/><\/div>\n<p><\/a>\n    <\/div>\n<\/p><\/div>\n<div id=\"centerpart\">\n    <a href=\"#pic3\"><\/p>\n<div id=\"p3\" class=\"picc\"><img decoding=\"async\" src=\"wp-images\/img5\/s3.jpg\" \/><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic8\"><\/p>\n<div id=\"p8\" class=\"picc\"><img decoding=\"async\" src=\"wp-images\/img5\/s8.jpg\" \/><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic13\"><\/p>\n<div id=\"p13\" class=\"picc\"><img decoding=\"async\" src=\"wp-images\/img5\/s13.jpg\" \/><\/div>\n<p><\/a>\n  <\/div>\n<div id=\"rightpart\">\n<div class=\"row1\">\n      <a href=\"#pic4\"><\/p>\n<div id=\"p4\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s4.jpg\" \/><\/div>\n<p><\/a><br \/>\n      <a href=\"#pic5\"><\/p>\n<div id=\"p5\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s5.jpg\" \/><\/div>\n<p><\/a>\n    <\/div>\n<div class=\"row2\">\n      <a href=\"#pic9\"><\/p>\n<div id=\"p9\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s9.jpg\" \/><\/div>\n<p><\/a><br \/>\n      <a href=\"#pic10\"><\/p>\n<div id=\"p10\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s10.jpg\" \/><\/div>\n<p><\/a>\n    <\/div>\n<div class=\"row3\">\n      <a href=\"#pic14\"><\/p>\n<div id=\"p14\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s14.jpg\" \/><\/div>\n<p><\/a><br \/>\n      <a href=\"#pic15\"><\/p>\n<div id=\"p15\" class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img5\/s15.jpg\" \/><\/div>\n<p><\/a>\n    <\/div>\n<\/p><\/div>\n<div id=\"frame\">\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic1\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/1.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic2\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/2.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic3\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/3.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic4\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/4.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic5\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/5.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic6\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/6.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic7\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/7.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic8\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/8.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic9\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/9.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic10\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/10.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic11\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/11.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic12\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/12.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic13\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/13.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic14\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/14.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a><br \/>\n    <a href=\"#pic20\"><\/p>\n<div id=\"pic15\" class=\"photo\"><img decoding=\"async\" src=\"wp-images\/img5\/15.jpg\" \/><span>\u00d7<\/span><\/div>\n<p><\/a>\n  <\/div>\n<\/div>\n<p><!-- CSS --><\/p>\n<style type=\"text\/css\">\n\/* \u30ae\u30e3\u30e9\u30ea\u30fc\u5168\u4f53 *\/\n#stage {\n\tbackground-color: #787878;\n\tmax-width: 640px;\n\theight: 320px;\n\tpadding-left:10px;\n\tposition: relative;\npointer-events: none;\n}\n\/* \u4e21\u5074\u306e\u30b5\u30e0\u30cd\u30a4\u30eb *\/\n.pic {\n\tborder: #fff 2px solid;\n\tfloat: left;\n\twidth:48%;\n}\n\/* \u4e2d\u592e\u306e\u30b5\u30e0\u30cd\u30a4\u30eb *\/\n.picc {\n\tborder: #fff 2px solid;\n\twidth:96%;\n}\n.pic:hover, .picc:hover {\n\tborder-color: red;\n\tcursor: pointer;\n}\n.pic img,.picc img { width:100%; }\n\/* \u5404\u884c *\/\n.row1, .row2, .row3 {\n\tclear: left;\n}\n\/* \u5de6\uff12\u5217\u3001\u4e2d\u592e\u3001\u53f3\uff12\u5217 *\/\n#leftpart, #centerpart, #rightpart {\n\tfloat: left;\n\tmargin-top: 45px;\n}<\/p>\n<p>#leftpart {width:41%;\n\ttransform: perspective(700px) rotateY(24deg) translateZ(25px);\n\tmargin-right: -2%;\n}\n#centerpart {width:20.5%;\n\ttransform: perspective(700px) rotateY(0deg) translateZ(-38px);\n}\n#rightpart {width:41%;\n\ttransform: perspective(700px) rotateY(-24deg) translateZ(25px);\n\tmargin-left: -2%;\n}\n\/* \u5168\u62e1\u5927\u5199\u771f\u683c\u7d0d\u67a0 *\/\n#frame { width:100%; }\n\/* \u5199\u771f\u67a0 *\/\n.photo {\n\tposition: absolute;\n\twidth:100%;height:100%;background:rgba(0,0,0,0.6);\n\tmargin-left:-10px;\n\tz-index: -1;\n\topacity: 0;\n\ttransition: opacity 1s ease;\n}\n\/* \u5199\u771f *\/\n.photo img {\n\tposition:absolute;\n\ttop: 50%;\n\tleft: 50%;\n\twidth:80%;\n\ttransform: translateY(-50%) translateX(-50%);\n\tborder:#fff 3px solid;\n}\n\/* \u9589\u3058\u308b\u5370\uff08\u00d7\uff09 *\/\n.photo span {\n\tposition:absolute;\n\ttop:3%;right:3%;\n\tcolor:#fff;font-weight:bold;font-size:36px;\n}\n.photo:hover > span { color:#f00; }\n\/* \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u5199\u771f\u67a0\u306e\u30a4\u30d9\u30f3\u30c8\n.photo:target {\n\topacity: 1;\n\tz-index: 30;\n} *\/\n<\/style>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u4f5c\u6210\u306b\u7528\u610f\u3057\u305f\u753b\u50cf<\/h4>\n<p>\u3000\u30fb\u30b5\u30e0\u30cd\u30a4\u30eb\u3000150*84px\u300015\u679a<br \/>\n\u3000\u30fb\u5199\u771f\u3000\u3000\u3000\u3000600*338px 15\u679a<\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528HTML<\/h4>\n<p>\u3000\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u306b\u4f75\u8a18\u3057\u3066\u3042\u308a\u307e\u3059\u3002<br \/>\n\u3000\u30fb15\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u306f\u3001\u5de6\uff12\u5217\u3001\u4e2d\u592e\uff11\u5217\u3001\u53f3\uff12\u5217\u306e\uff13\u3064\u306e\u30d6\u30ed\u30c3\u30af\u306b\u5206\u3051\u3001\u5de6\u53f3\u306b\u9060\u8fd1\u611f\u3092\u6301\u305f\u305b\u3066\u52b9\u679c\u3092\u51fa\u3057\u3066\u3044\u308b\u3002<br \/>\n\u3000\u30fb\u5404\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u76f8\u5f53\u3059\u308b\u62e1\u5927\u5199\u771f\u3078 a \u30bf\u30b0\u3067\u30ea\u30f3\u30af\u3092\u8cbc\u3063\u3066\u304a\u308a\u3001css \u306e :target \u3067\u767a\u751f\u3057\u305f\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u5143\u3092\u8a8d\u77e5\u3057\u3001\u305d\u306e\u5199\u771f\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u3002<br \/>\n\u3000\u30fb\u62e1\u5927\u5199\u771f\u306f\u3001.photo\u306e\u4e2d\u592e\u306b\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3001\u9ed2\u8272\u534a\u900f\u660e\u306ebackground\u306b\u9589\u3058\u308b\u5370\u3068\u3057\u3066\u2716\u3092\u53f3\u4e0a\u306b\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u305f\u3002<br \/>\n\u3000\u3000\uff08\u5199\u771f\u304c\u8868\u793a\u3055\u308c\u305f\u5f8c\u306f\u3001stage\u306e\u3069\u306e\u90e8\u5206\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3082\u5143\u306b\u623b\u308b\uff09<\/p>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528CSS<\/h4>\n<p>\u3000\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u306b\u4f75\u8a18\u3057\u3066\u3042\u308a\u307e\u3059\u3002<br \/>\n\u3000\u30fb\u8868\u793a\u67a0\uff08#stage\uff09\u306f\u3001max-width:700px;\u3000\u3068\u3057\u3066\u3044\u308b\u304c\u3001\u3053\u306e\u5024\u3092\u5909\u3048\u308b\u3068\u3001\u30b5\u30a4\u30ba\u304c\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u3002\u305f\u3060\u3057\u3001\u5927\u304d\u304f\u8868\u793a\u3059\u308b\u3068\u304d\u306f\u3001\u6e96\u5099\u3059\u308b\u5199\u771f\u306e\u30b5\u30a4\u30ba\u3082\u5927\u304d\u304f\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3057\u3001\u30b9\u30c6\u30fc\u30b8\u306e\u9ad8\u3055\u3084\u8a2d\u5b9a\u3057\u3066\u3044\u308bmargin\u306a\u3069\u306e\u6570\u5024\u3082\u8abf\u6574\u304c\u5fc5\u8981\u306b\u306a\u308b\u3002<br \/>\n\u3000\u30fb\u5de6\u53f3\u306e\u30d6\u30ed\u30c3\u30af\u306b\u3001\u4f8b\u3048\u3070\u3001transform: perspective(700px) rotateY(24deg) translateZ(25px);\u3000\u306a\u3069\u30683D\u52b9\u679c\u3092\u65bd\u3057\u3066\u3044\u308b\u304c\u3001\u3053\u308c\u3089\u306e\u6570\u5024\u3092\u5909\u3048\u308c\u3070\u3001\u9060\u8fd1\u611f\u306e\u5177\u5408\u304c\u5909\u308f\u308b\u3002<br \/>\n\u3000\u30fb\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u3046\u307e\u304f\u4e26\u3076\u3088\u3046\u306b\u3001\u305d\u308c\u305e\u308c\u306e\u30d6\u30ed\u30c3\u30af\u306e\u5e45\u3001\u30de\u30fc\u30b8\u30f3\u306a\u3069\u3092\u5fae\u5999\u306b\u8abf\u6574\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u5199\u771f\u30b5\u30a4\u30ba\u306a\u3069\u306e\u6761\u4ef6\u304c\u5909\u308f\u308c\u3070\u3001\u3053\u308c\u3089\u306e\u6570\u5024\u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u751f\u3058\u308b\u5834\u5408\u3082\u3042\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u30b5\u30e0\u30cd\u30a4\u30eb\u30af\u30ea\u30c3\u30af\u578b\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3001\u3044\u308f\u3086\u308b\u30013D WALL \u578b\u306a\u3069\u3068\u547c\u3070\u308c\u3066\u3044\u308b\u30bf\u30a4\u30d7\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u3001\u5965\u307e\u3063\u305f\u4e2d\u592e\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u3001\u4e21\u5074\u304b\u3089\u9060\u8fd1\u611f\u3092\u3082\u3063\u3066\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u8fd1\u3065\u3044\u3066\u3044\u304f\u3088\u3046\u306b\u898b\u3048 &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=1144\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1144","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1144"}],"version-history":[{"count":17,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1144\/revisions"}],"predecessor-version":[{"id":1161,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1144\/revisions\/1161"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}