{"id":2414,"date":"2021-04-10T00:18:28","date_gmt":"2021-04-09T16:18:28","guid":{"rendered":"https:\/\/blog.brain1981.com\/?p=2414"},"modified":"2021-04-15T13:57:22","modified_gmt":"2021-04-15T05:57:22","slug":"css-3d%e5%9d%90%e6%a0%87%e5%ae%9e%e7%8e%b0%e7%a0%94%e7%a9%b6","status":"publish","type":"post","link":"https:\/\/blog.brain1981.com\/2414.html","title":{"rendered":"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76"},"content":{"rendered":"<p>\u5148\u5c55\u793a\u7814\u7a76\u6210\u679c\uff1a<br \/>\n<div style=\"width: 625px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-2414-1\" width=\"625\" height=\"352\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube.webm?_=1\" \/><a href=\"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube.webm\">https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube.webm<\/a><\/video><\/div><\/p>\n<p>\u4eca\u5929\u60f3\u7814\u7a76\u4e00\u4e0bCSS\u7684 3D\u5b9e\u73b0\uff0c\u4f46\u53c8\u4e0d\u6562\u6df1\u5165\u4e09\u89d2\u51fd\u6570\u548c\u7ebf\u6027\u4ee3\u6570\u7684\u77e5\u8bc6\uff08\u591a\u5e74\u524d\u5c31\u5df2\u8fd8\u7ed9\u9ad8\u6570\u8001\u5e08\u4e86\uff09\uff0c\u6240\u4ee5\u5c31\u6d45\u6d45\u5730\u4ecetranslateX\/translateY\/translateZ\u8fd93\u4e2a\u53d8\u6362\u505a\u4e00\u4e2a\u7acb\u65b9\u4f53\u5f00\u59cb\u3002\u8fd9\u4e09\u4e2a\u53d8\u6362\u51fd\u6570\u5f88\u7b80\u5355\uff0c\u5173\u952e\u662f\u8981\u5efa\u7acb\u56fa\u5b9a\u7684\u5750\u6807\u7cfb\uff0c\u8fd9\u6837\u9875\u9762\u7684\u5143\u7d20\u5c31\u80fd\u901a\u8fc7\u8fd9\u4e2a\u5750\u6807\u7cfb\u83b7\u5f97\u7acb\u4f53\u611f\u3002<\/p>\n<p>\u6211\u7684HTML\u7ed3\u6784\uff1a<\/p>\n<pre lang=\"HTML5\" line=\"1\">\r\n<div class=\"scene\">\r\n  <!--\u65b9\u5757-->\r\n  <div class=\"cube\">\r\n    <div class=\"cube-face cube-face-front\">1<\/div>\r\n    <div class=\"cube-face cube-face-right\">2<\/div>\r\n    <div class=\"cube-face cube-face-top\">4<\/div>\r\n    <div class=\"cube-face cube-face-left\">3<\/div>\r\n    <div class=\"cube-face cube-face-back\">5<\/div>\r\n    <div class=\"cube-face cube-face-bottom\">6<\/div>\r\n  <\/div>\r\n  <!--\u5750\u6807\u7ebf-->\r\n  <div class=\"line line-x\"><\/div>\r\n  <div class=\"line line-y\"><\/div>\r\n  <div class=\"line line-z\"><\/div>\r\n<\/div>\r\n<\/pre>\n<p><!--more--><\/p>\n<div.scene>\u4f5c\u4e3a\u573a\u666f\uff0c\u5176\u4e2d6\u4e2adiv\u65b9\u5757\u4e3a\u7acb\u65b9\u4f53\u76846\u4e2a\u9762\uff0c\u4e09\u6761\u5750\u6807\u7ebf\u4ee3\u88683D\u7684\u5750\u6807\u8f74\uff0c\u4e3a\u4e86\u4f7f\u6574\u4e2a\u573a\u666f\u80fd\u54cd\u5e94\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u53d6\u767e\u5206\u6bd440%\uff0c60%\u4e3a\u5750\u6807\u539f\u70b9\u3002<br \/>\n\u5750\u6807\u7ebf\u7684\u6837\u5f0f\uff1a<\/p>\n<pre lang=\"CSS\" line=\"1\">\r\n.line{\r\n\tposition: absolute;\r\n\twidth: 500px; height: 1px;\r\n\tborder-top: 1px dotted #000;\r\n\tbackground:transparent;\r\n\t\/*\u5750\u6807\u8f74\u8981\u56f4\u7ed5\u539f\u70b9\u65cb\u8f6c\uff0c\u5148\u5b9a\u597dtransform-origin*\/\r\n\ttransform-origin: 0 0;\r\n\tleft:40%;\r\n\ttop:60%;\r\n}\r\n.line-y{\r\n\t\/*x\u65b9\u5411\u65cb\u8f6c\u83b7\u5f97y\u8f74*\/\r\n\ttransform: rotate(-90deg);\r\n}\r\n.line-z{\r\n\t\/*y\u65b9\u5411\u65cb\u8f6c\u83b7\u5f97z\u8f74*\/\r\n\ttransform: rotateY(-90deg);\r\n}\r\n<\/pre>\n<p>\u573a\u666f\u6837\u5f0f\uff1a<\/p>\n<pre lang=\"CSS\" line=\"1\">\r\n.scene {\r\n\tposition: relative;\r\n\twidth: 700px;\r\n\tmax-width:100%;\r\n\theight: 500px;\r\n\tborder: 2px solid #CCC;\r\n\t\/*\u8fd9\u4e24\u4e2aperspective\u5c5e\u6027\u76f4\u63a5\u51b3\u5b9a\u89c6\u89c9\u6548\u679c\uff0c\u8bf8\u4f4d\u53ef\u4ee5\u81ea\u5df1\u8c03\u6574*\/\r\n\tperspective: 1600px;\r\n\tperspective-origin: 150% -40%;\r\n\toverflow: hidden;\r\n\t\/*\u7acb\u65b9\u4f53\u7684\u5c3a\u5bf8\u53d8\u91cf\uff0c\u5728\u5750\u6807\u4e2d\u4f1a\u591a\u6b21\u7528\u5230\u8d1f\u503c\uff0c\u8fd9\u91cc\u5b9a\u4e49\u4e00\u6b63\u4e00\u8d1f\u4e24\u4e2a\u503c\u662f\u4e3a\u4e86\u51cf\u5c11\u540e\u9762\u7684\u8fd0\u7b97*\/\r\n\t--cube-size: 100px;\r\n\t--cube-size-minus: -100px;\r\n\ttransition: all 0.5s;\r\n}\r\n<\/pre>\n<p>\u4ee5\u4e0a\u5b9a\u4e49\u5b8c\u6bd5\u540e\uff0c\u83b7\u5f97\u573a\u666f\uff0c\u6ce8\u610f\u5750\u6807\u539f\u70b9\u4f4d\u7f6e\u4e3a40%\uff0c60%\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube1.gif\" alt=\"\" width=\"712\" height=\"512\" class=\"alignnone size-full wp-image-2420\" \/><\/p>\n<p>\u63a5\u4e0b\u6765\u8bbe\u7f6e\u7acb\u65b9\u4f53\u7684\u6837\u5f0f\uff1a<\/p>\n<pre lang=\"CSS\" line=\"1\">\r\n.cube {\r\n\twidth: var(--cube-size);\r\n\theight: var(--cube-size);\r\n\tposition: absolute;\r\n\t\/*\u4f4d\u7f6e\u653e\u5728\u539f\u70b9*\/\r\n\tleft: 40%;\r\n\ttop: 60%;\r\n\ttransform-style: preserve-3d;\r\n\t\/*\u56e0\u8981\u4f7f\u7acb\u65b9\u4f53\u5e95\u90e8\u5bf9\u5176\u539f\u70b9\uff0c\u6240\u4ee5\u5fc5\u987b\u5411\u4e0a\u504f\u79fb\u4e00\u4e2a\u7acb\u65b9\u4f53\u9ad8\u5ea6*\/\r\n\ttransform: translateY(var(--cube-size-minus));\r\n\ttransition: all 0.5s;\r\n}\r\n\/*\u516d\u4e2a\u9762\u7edf\u4e00\u6837\u5f0f*\/\r\n.cube-face {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\twidth: var(--cube-size);\r\n\theight: var(--cube-size);\r\n\tdisplay:flex;\r\n\tflex-direction: row;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tfont-size: 40px;\r\n\tfont-weight: bold;\r\n\tcolor: #fff;\r\n\ttext-align: center;\r\n\ttransform-origin: 0 100%;\r\n\ttransition: all 0.5s linear;\r\n}\r\n\/*\u516d\u4e2a\u9762\u7684\u989c\u8272*\/\r\n.cube-face-front  { background: rgba( 25, 175, 240, 0.8); }\r\n.cube-face-right  { background: rgba( 134, 209, 204, 0.8); }\r\n.cube-face-back   { background: rgba(189, 211, 225, 0.8); }\r\n.cube-face-left   { background: rgba(225, 190, 135, 0.8); }\r\n.cube-face-top    { background: rgba(240, 175, 25, 0.8); }\r\n.cube-face-bottom { background: rgba(25, 175, 240, 0.8); }\r\n\r\n\/*\u516d\u4e2a\u9762\u7684\u4f4d\u7f6e\uff0c\u5176\u4e2dback\u8fd9\u9762\u6b63\u597d\u5bf9\u9f50x\u548cy\u8f74\u539f\u70b9\u9762\uff0c\u65e0\u9700\u7ffb\u8f6c\uff0c\u5176\u4ed6\u4e2a\u9762\uff0c\u90fd\u662f\u5728back\u9762\u57fa\u7840\u4e0a\uff0c\u901a\u8fc7rotate\u548ctranslate\u590d\u5408\u7ffb\u8f6c\u4f4d\u79fb*\/\r\n.cube-face-back   { }\r\n\/*\u524d\u9762\uff0c\u4ec5\u671d\u7740\u5c4f\u5e55\u79fb\u8fd11\u4e2a\u5bbd\u5ea6\uff0cz\u8f74\u8d1f\u65b9\u5411*\/\r\n.cube-face-front  { transform: translateZ(var(--cube-size)); }\r\n\/*\u53f3\u4fa7\u9762\uff0c\u7ad6\u76f4\u65b9\u5411\u7ffb\u8f6c90\u5ea6\u5230\u5c4f\u5e55\u91cc\u9762\u53bb\u4e86\uff0ctranslateX\u79fb\u51fa\u6765\u4e00\u4e2a\u5355\u4f4d\uff0c\u518d\u5411\u53f3\u79fb\u4e00\u4e2a\u5355\u4f4d\u5230\u6b63\u786e\u4f4d\u7f6e*\/\r\n.cube-face-right  { transform: rotateY( 90deg) translateX(var(--cube-size-minus)) translateZ(var(--cube-size));}\r\n\/*\u5de6\u4fa7\u9762\uff0c\u7ad6\u76f4\u65b9\u5411\u7ffb\u8f6c90\u5ea6\u5230\u5c4f\u5e55\u91cc\u9762\u53bb\u4e86\uff0ctranslateX\u79fb\u51fa\u6765\u4e00\u4e2a\u5355\u4f4d*\/\r\n.cube-face-left   { transform: rotateY( 90deg) translateX(var(--cube-size-minus)); }\r\n\/*\u9876\u90e8\uff0cX\u8f74\u65b9\u5411\u7ffb\u8f6c90\u5ea6\u5230\u5c4f\u5e55\u91cc\u9762\u53bb\u4e86\uff0c\u518d\u4e0a\u79fb\uff0c\u518d\u79fb\u51fa*\/\r\n.cube-face-top    { transform: rotateX( 90deg) translateY(var(--cube-size)) translateZ(var(--cube-size));  }\r\n\/*\u9876\u90e8\uff0cX\u8f74\u65b9\u5411\u7ffb\u8f6c90\u5ea6\u5230\u5c4f\u5e55\u91cc\u9762\u53bb\u4e86\uff0c\u518d\u79fb\u51fa*\/\r\n.cube-face-bottom { transform: rotateX( 90deg) translateY(var(--cube-size)); }\r\n<\/pre>\n<p>\u73b0\u5728\u65b9\u5757\u5c31\u5f62\u6210\u4e86\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube2.gif\" alt=\"\" width=\"716\" height=\"515\" class=\"alignnone size-full wp-image-2422\" \/><\/p>\n<p>\u8fd9\u662f\u4e00\u4e2a\u6b63\u7acb\u65b9\u4f53\uff0c\u5047\u5982\u8981\u8c03\u6574\u4efb\u610f\u4e00\u4e2a\u9762\u7684\u5c3a\u5bf8\uff0c\u4fdd\u6301\u5b83\u7684\u5b8c\u6574\uff0c\u5b83\u5c31\u4f1a\u53d8\u6210\u957f\u65b9\u4f53\uff0c\u5176\u4ed6\u5404\u4e2a\u9762\u7684\u5c3a\u5bf8\u4e5f\u9700\u8981\u76f8\u5e94\u8c03\u6574\u3002\u8fd9\u65f6\u5019\u5c31\u501f\u52a9\u4e00\u4e0bJS\uff1a<\/p>\n<pre lang=\"javascript\" line=\"0\">\r\n\/\/\u901a\u8fc7\u8fd9\u4e2a\u51fd\u6570\uff0c\u53ef\u4ee5\u5b8c\u6210\u7acb\u65b9\u4f53\u7684\u4efb\u610f\u5c3a\u5bf8\u53d8\u5316\r\nfunction resizeCube(l,w,h){\r\n\tvar cube_length = l;\r\n\tvar cube_width = w;\r\n\tvar cube_height = h;\r\n\r\n\t$(\".cube-face-front\").css(\"width\" , cube_width+\"px\")\r\n\t$(\".cube-face-front\").css(\"height\" , cube_height+\"px\")\r\n\t$(\".cube-face-front\").css(\"transform\" , \"translateZ(\"+cube_length+\"px)\")\r\n\t\t\r\n\t$(\".cube-face-back\").css(\"width\" , cube_width+\"px\")\r\n\t$(\".cube-face-back\").css(\"height\" , cube_height+\"px\")\r\n\r\n\t$(\".cube-face-top\").css(\"width\" , cube_width+\"px\")\r\n\t$(\".cube-face-top\").css(\"height\" , cube_length+\"px\")\r\n\t$(\".cube-face-top\").css(\"transform\" , \"rotateX( 90deg) translateZ(\"+cube_height+\"px) translateY(\"+cube_length+\"px)\")\r\n\r\n\t$(\".cube-face-bottom\").css(\"width\" , cube_width+\"px\")\r\n\t$(\".cube-face-bottom\").css(\"height\" , cube_length+\"px\")\r\n\t$(\".cube-face-bottom\").css(\"transform\" , \"rotateX( 90deg) translateY(\"+cube_length+\"px)\")\r\n\r\n\t$(\".cube-face-right\").css(\"width\" , cube_length+\"px\")\r\n\t$(\".cube-face-right\").css(\"height\" , cube_height+\"px\")\r\n\t$(\".cube-face-right\").css(\"transform\" , \"rotateY( 90deg) translateZ(\"+cube_width+\"px) translateX(-\"+cube_length+\"px)\")\r\n\r\n\t$(\".cube-face-left\").css(\"width\" , cube_length+\"px\")\r\n\t$(\".cube-face-left\").css(\"height\" , cube_height+\"px\")\r\n\t$(\".cube-face-left\").css(\"transform\" , \"rotateY( 90deg) translateX(-\"+cube_length+\"px)\")\r\n}\r\n<\/pre>\n<p>\u4ee5\u4e0a\u90fd\u662f\u57fa\u7840\u539f\u7406\uff0c\u6211\u540e\u7eed\u53c8\u5bf9\u6574\u4e2a\u7a0b\u5e8f\u505a\u4e86\u4e00\u70b9\u70b9\u5c0f\u53d8\u5316\uff0c\u5b83\u5c31\u6210\u4e86\u4e00\u4e2a\u53ef\u4ee5\u505a\u4e00\u4e9b\u968f\u673a\u53d8\u5316\u7684\u5c0f\u73a9\u5177\uff0c\u89c1\u8fd9\u4e2a\u94fe\u63a5\uff1a<a href=\"https:\/\/blog.brain1981.com\/wp-content\/uploads\/css-3d-cube.html\" rel=\"noopener\" target=\"_blank\">https:\/\/blog.brain1981.com\/wp-content\/uploads\/css-3d-cube.html<\/a><\/p>\n<p>\u8fd9\u4e2a\u5750\u6807\u7cfb\u53ea\u662f\u6211\u7684\u4e00\u4e2a\u7f51\u7ad9\u9879\u76ee\u91cc\u8981\u7528\u5230\u7684\u5c0f\u5de5\u5177\uff0c\u56e0\u4e3a\u53ea\u9700\u8981\u7b80\u5355\u5b9e\u73b0\uff0c\u5c31\u4e0d\u60f3\u7ed9\u9875\u9762\u52a0\u8f7d\u4efb\u4f55\u5e9e\u5927\u7684JS\u5e93\uff0c\u4e8e\u662f\u81ea\u5df1\u7814\u7a76\u4e86\u4e00\u4e0b\u5b9e\u73b0\u3002\u518d\u590d\u6742\u76843D\u5f62\u72b6\uff0c\u90fd\u662f\u901a\u8fc7\u4e00\u4e2a\u4e2a\u9762\u5f62\u6210\u7684\uff0c\u6211\u4eec\u53ef\u4ee5\u7528background-image\u7ed9\u5b83\u4eec\u8d34\u56fe\uff0c\u4e5f\u53ef\u4ee5\u589e\u52a0\u4efb\u610f\u4e2a\u9762\u6784\u5efa\u590d\u6742\u7684\u5f62\u72b6\uff0c\u4e0d\u8fc7\u7eaf\u624b\u5de5\u8fd9\u6837\u505a\u662f\u5f88\u7d2f\u7684\uff0c\u505a\u590d\u6742\u7684\u9879\u76ee\uff0c\u80af\u5b9a\u8fd8\u662f\u8981\u5f15\u5165\u9002\u5408\u7684\u5e93\u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5148\u5c55\u793a\u7814\u7a76\u6210\u679c\uff1a \u4eca\u5929\u60f3\u7814\u7a76\u4e00\u4e0bCSS\u7684 3D\u5b9e\u73b0\uff0c\u4f46\u53c8\u4e0d\u6562\u6df1\u5165\u4e09\u89d2\u51fd\u6570\u548c\u7ebf\u6027\u4ee3\u6570\u7684\u77e5\u8bc6\uff08\u591a\u5e74\u524d\u5c31\u5df2\u8fd8\u7ed9\u9ad8\u6570\u8001 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[2],"class_list":["post-2414","post","type-post","status-publish","format-standard","hentry","category-front-end-development","tag-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76 - Brain\u7684\u6280\u672f\u7b14\u8bb0<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.brain1981.com\/2414.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76 - Brain\u7684\u6280\u672f\u7b14\u8bb0\" \/>\n<meta property=\"og:description\" content=\"\u5148\u5c55\u793a\u7814\u7a76\u6210\u679c\uff1a \u4eca\u5929\u60f3\u7814\u7a76\u4e00\u4e0bCSS\u7684 3D\u5b9e\u73b0\uff0c\u4f46\u53c8\u4e0d\u6562\u6df1\u5165\u4e09\u89d2\u51fd\u6570\u548c\u7ebf\u6027\u4ee3\u6570\u7684\u77e5\u8bc6\uff08\u591a\u5e74\u524d\u5c31\u5df2\u8fd8\u7ed9\u9ad8\u6570\u8001 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.brain1981.com\/2414.html\" \/>\n<meta property=\"og:site_name\" content=\"Brain\u7684\u6280\u672f\u7b14\u8bb0\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-09T16:18:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-15T05:57:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube1.gif\" \/>\n<meta name=\"author\" content=\"Brain\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brain\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html\"},\"author\":{\"name\":\"Brain\",\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/#\\\/schema\\\/person\\\/7689202bbb2f967b4c66309c1cc5e65d\"},\"headline\":\"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76\",\"datePublished\":\"2021-04-09T16:18:28+00:00\",\"dateModified\":\"2021-04-15T05:57:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html\"},\"wordCount\":34,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/#\\\/schema\\\/person\\\/7689202bbb2f967b4c66309c1cc5e65d\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/cube1.gif\",\"keywords\":[\"CSS\"],\"articleSection\":[\"\u524d\u7aef\u5f00\u53d1\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html\",\"url\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html\",\"name\":\"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76 - Brain\u7684\u6280\u672f\u7b14\u8bb0\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/cube1.gif\",\"datePublished\":\"2021-04-09T16:18:28+00:00\",\"dateModified\":\"2021-04-15T05:57:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.brain1981.com\\\/2414.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#primaryimage\",\"url\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/cube1.gif\",\"contentUrl\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/cube1.gif\",\"width\":712,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/2414.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\\\/\\\/blog.brain1981.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/#website\",\"url\":\"https:\\\/\\\/blog.brain1981.com\\\/\",\"name\":\"Brain\u7684\u6280\u672f\u7b14\u8bb0\",\"description\":\"WordPress\u5efa\u7ad9\u5f00\u53d1\u6559\u7a0b\u4e0e\u6280\u672f\u7814\u7a76\",\"publisher\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/#\\\/schema\\\/person\\\/7689202bbb2f967b4c66309c1cc5e65d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blog.brain1981.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/#\\\/schema\\\/person\\\/7689202bbb2f967b4c66309c1cc5e65d\",\"name\":\"Brain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/favicon.webp\",\"url\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/favicon.webp\",\"contentUrl\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/favicon.webp\",\"width\":75,\"height\":75,\"caption\":\"Brain\"},\"logo\":{\"@id\":\"https:\\\/\\\/blog.brain1981.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/favicon.webp\"},\"sameAs\":[\"http:\\\/\\\/brain1981.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76 - Brain\u7684\u6280\u672f\u7b14\u8bb0","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.brain1981.com\/2414.html","og_locale":"zh_CN","og_type":"article","og_title":"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76 - Brain\u7684\u6280\u672f\u7b14\u8bb0","og_description":"\u5148\u5c55\u793a\u7814\u7a76\u6210\u679c\uff1a \u4eca\u5929\u60f3\u7814\u7a76\u4e00\u4e0bCSS\u7684 3D\u5b9e\u73b0\uff0c\u4f46\u53c8\u4e0d\u6562\u6df1\u5165\u4e09\u89d2\u51fd\u6570\u548c\u7ebf\u6027\u4ee3\u6570\u7684\u77e5\u8bc6\uff08\u591a\u5e74\u524d\u5c31\u5df2\u8fd8\u7ed9\u9ad8\u6570\u8001 [&hellip;]","og_url":"https:\/\/blog.brain1981.com\/2414.html","og_site_name":"Brain\u7684\u6280\u672f\u7b14\u8bb0","article_published_time":"2021-04-09T16:18:28+00:00","article_modified_time":"2021-04-15T05:57:22+00:00","og_image":[{"url":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube1.gif","type":"","width":"","height":""}],"author":"Brain","twitter_misc":{"\u4f5c\u8005":"Brain","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.brain1981.com\/2414.html#article","isPartOf":{"@id":"https:\/\/blog.brain1981.com\/2414.html"},"author":{"name":"Brain","@id":"https:\/\/blog.brain1981.com\/#\/schema\/person\/7689202bbb2f967b4c66309c1cc5e65d"},"headline":"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76","datePublished":"2021-04-09T16:18:28+00:00","dateModified":"2021-04-15T05:57:22+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.brain1981.com\/2414.html"},"wordCount":34,"commentCount":0,"publisher":{"@id":"https:\/\/blog.brain1981.com\/#\/schema\/person\/7689202bbb2f967b4c66309c1cc5e65d"},"image":{"@id":"https:\/\/blog.brain1981.com\/2414.html#primaryimage"},"thumbnailUrl":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube1.gif","keywords":["CSS"],"articleSection":["\u524d\u7aef\u5f00\u53d1"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blog.brain1981.com\/2414.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blog.brain1981.com\/2414.html","url":"https:\/\/blog.brain1981.com\/2414.html","name":"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76 - Brain\u7684\u6280\u672f\u7b14\u8bb0","isPartOf":{"@id":"https:\/\/blog.brain1981.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.brain1981.com\/2414.html#primaryimage"},"image":{"@id":"https:\/\/blog.brain1981.com\/2414.html#primaryimage"},"thumbnailUrl":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube1.gif","datePublished":"2021-04-09T16:18:28+00:00","dateModified":"2021-04-15T05:57:22+00:00","breadcrumb":{"@id":"https:\/\/blog.brain1981.com\/2414.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.brain1981.com\/2414.html"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/blog.brain1981.com\/2414.html#primaryimage","url":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube1.gif","contentUrl":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2021\/04\/cube1.gif","width":712,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/blog.brain1981.com\/2414.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/blog.brain1981.com\/"},{"@type":"ListItem","position":2,"name":"CSS 3D\u5750\u6807\u7a7a\u95f4\u5b9e\u73b0\u7814\u7a76"}]},{"@type":"WebSite","@id":"https:\/\/blog.brain1981.com\/#website","url":"https:\/\/blog.brain1981.com\/","name":"Brain\u7684\u6280\u672f\u7b14\u8bb0","description":"WordPress\u5efa\u7ad9\u5f00\u53d1\u6559\u7a0b\u4e0e\u6280\u672f\u7814\u7a76","publisher":{"@id":"https:\/\/blog.brain1981.com\/#\/schema\/person\/7689202bbb2f967b4c66309c1cc5e65d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.brain1981.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"https:\/\/blog.brain1981.com\/#\/schema\/person\/7689202bbb2f967b4c66309c1cc5e65d","name":"Brain","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2026\/01\/favicon.webp","url":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2026\/01\/favicon.webp","contentUrl":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2026\/01\/favicon.webp","width":75,"height":75,"caption":"Brain"},"logo":{"@id":"https:\/\/blog.brain1981.com\/wp-content\/uploads\/2026\/01\/favicon.webp"},"sameAs":["http:\/\/brain1981.com"]}]}},"views":3569,"_links":{"self":[{"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/posts\/2414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/comments?post=2414"}],"version-history":[{"count":17,"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/posts\/2414\/revisions"}],"predecessor-version":[{"id":2436,"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/posts\/2414\/revisions\/2436"}],"wp:attachment":[{"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/media?parent=2414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/categories?post=2414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.brain1981.com\/wp-json\/wp\/v2\/tags?post=2414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}