{"id":238384,"date":"2023-12-26T06:42:15","date_gmt":"2023-12-25T22:42:15","guid":{"rendered":"https:\/\/www.idc.net\/help\/238384\/"},"modified":"2023-12-26T06:42:15","modified_gmt":"2023-12-25T22:42:15","slug":"css%e5%85%a5%e9%97%a8-perspective-origin%ef%bc%88%e9%80%8f%e8%a7%86%e5%8e%9f%e7%82%b9%ef%bc%89","status":"publish","type":"post","link":"https:\/\/idc.net\/help\/238384\/","title":{"rendered":"Css\u5165\u95e8: perspective-origin\uff08\u900f\u89c6\u539f\u70b9\uff09"},"content":{"rendered":"<p><title id=\"css%e5%85%a5%e9%97%a8-perspective-origin%ef%bc%88%e9%80%8f%e8%a7%86%e5%8e%9f%e7%82%b9%ef%bc%89-oCNhjgqpPB\">Css\u5165\u95e8: perspective-origin\uff08\u900f\u89c6\u539f\u70b9\uff09<\/title><\/p>\n<h1 id=\"css%e5%85%a5%e9%97%a8-perspective-origin%ef%bc%88%e9%80%8f%e8%a7%86%e5%8e%9f%e7%82%b9%ef%bc%89-oCNhjgqpPB\">Css\u5165\u95e8: perspective-origin\uff08\u900f\u89c6\u539f\u70b9\uff09<\/h1>\n<p>\u5728CSS\u4e2d\uff0c\u900f\u89c6\u539f\u70b9\uff08perspective-origin\uff09\u5c5e\u6027\u7528\u4e8e\u5b9a\u4e493D\u8f6c\u6362\u5143\u7d20\u7684\u900f\u89c6\u70b9\u4f4d\u7f6e\u3002\u900f\u89c6\u70b9\u662f\u6307\u89c2\u5bdf\u8005\u89c2\u5bdf3D\u573a\u666f\u65f6\u7684\u4f4d\u7f6e\u3002<\/p>\n<h2 id=\"%e9%80%8f%e8%a7%86%e5%8e%9f%e7%82%b9%e7%9a%84%e8%af%ad%e6%b3%95-oCNhjgqpPB\">\u900f\u89c6\u539f\u70b9\u7684\u8bed\u6cd5<\/h2>\n<p>\u900f\u89c6\u539f\u70b9\u5c5e\u6027\u7684\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>\nperspective-origin: x-axis y-axis;\n<\/pre>\n<p>\u5176\u4e2d\uff0cx-axis\u548cy-axis\u662f\u957f\u5ea6\u503c\uff0c\u53ef\u4ee5\u4f7f\u7528\u50cf\u7d20\uff08px\uff09\u3001\u767e\u5206\u6bd4\uff08%\uff09\u6216\u5173\u952e\u5b57\uff08left\u3001center\u3001right\u3001top\u3001bottom\uff09\u6765\u5b9a\u4e49\u3002<\/p>\n<h2 id=\"%e9%80%8f%e8%a7%86%e5%8e%9f%e7%82%b9%e7%9a%84%e4%bd%9c%e7%94%a8-oCNhjgqpPB\">\u900f\u89c6\u539f\u70b9\u7684\u4f5c\u7528<\/h2>\n<p>\u900f\u89c6\u539f\u70b9\u5c5e\u6027\u53ef\u4ee5\u5f71\u54cd3D\u8f6c\u6362\u5143\u7d20\u7684\u900f\u89c6\u6548\u679c\u3002\u901a\u8fc7\u6539\u53d8\u900f\u89c6\u539f\u70b9\u7684\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u6539\u53d8\u5143\u7d20\u57283D\u7a7a\u95f4\u4e2d\u7684\u89c2\u5bdf\u89d2\u5ea6\uff0c\u4ece\u800c\u4ea7\u751f\u4e0d\u540c\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n<h2 id=\"%e9%80%8f%e8%a7%86%e5%8e%9f%e7%82%b9%e7%9a%84%e7%a4%ba%e4%be%8b-oCNhjgqpPB\">\u900f\u89c6\u539f\u70b9\u7684\u793a\u4f8b<\/h2>\n<p>\u4e0b\u9762\u662f\u4e00\u4e2a\u4f7f\u7528\u900f\u89c6\u539f\u70b9\u5c5e\u6027\u7684\u793a\u4f8b\uff1a<\/p>\n<pre>\n.box {\n  width: 200px;\n  height: 200px;\n  background-color: red;\n  transform: perspective(500px) rotateY(45deg);\n  perspective-origin: 50% 50%;\n}\n<\/pre>\n<p>\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u900f\u89c6\u539f\u70b9\u88ab\u8bbe\u7f6e\u4e3a\u5143\u7d20\u7684\u4e2d\u5fc3\u70b9\uff0850% 50%\uff09\u3002\u8fd9\u610f\u5473\u7740\u89c2\u5bdf\u8005\u5c06\u4ece\u5143\u7d20\u7684\u4e2d\u5fc3\u70b9\u89c2\u5bdf3D\u573a\u666f\u3002<\/p>\n<h2 id=\"%e9%80%8f%e8%a7%86%e5%8e%9f%e7%82%b9%e7%9a%84%e6%b3%a8%e6%84%8f%e4%ba%8b%e9%a1%b9-oCNhjgqpPB\">\u900f\u89c6\u539f\u70b9\u7684\u6ce8\u610f\u4e8b\u9879<\/h2>\n<p>\u5728\u4f7f\u7528\u900f\u89c6\u539f\u70b9\u5c5e\u6027\u65f6\uff0c\u9700\u8981\u6ce8\u610f\u4ee5\u4e0b\u51e0\u70b9\uff1a<\/p>\n<ul>\n<li>\u900f\u89c6\u539f\u70b9\u9ed8\u8ba4\u503c\u4e3a50% 50%\uff0c\u5373\u5143\u7d20\u7684\u4e2d\u5fc3\u70b9\u3002<\/li>\n<li>\u900f\u89c6\u539f\u70b9\u7684\u4f4d\u7f6e\u76f8\u5bf9\u4e8e\u5143\u7d20\u7684\u8fb9\u754c\u6846\u800c\u8a00\u3002<\/li>\n<li>\u900f\u89c6\u539f\u70b9\u7684\u4f4d\u7f6e\u53ef\u4ee5\u5f71\u54cd\u5143\u7d20\u7684\u65cb\u8f6c\u3001\u7f29\u653e\u548c\u4f4d\u79fb\u6548\u679c\u3002<\/li>\n<\/ul>\n<h2 id=\"%e6%80%bb%e7%bb%93-oCNhjgqpPB\">\u603b\u7ed3<\/h2>\n<p>\u900f\u89c6\u539f\u70b9\u662fCSS\u4e2d\u7528\u4e8e\u5b9a\u4e493D\u8f6c\u6362\u5143\u7d20\u7684\u900f\u89c6\u70b9\u4f4d\u7f6e\u7684\u5c5e\u6027\u3002\u901a\u8fc7\u6539\u53d8\u900f\u89c6\u539f\u70b9\u7684\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u6539\u53d8\u5143\u7d20\u57283D\u7a7a\u95f4\u4e2d\u7684\u89c2\u5bdf\u89d2\u5ea6\uff0c\u4ece\u800c\u4ea7\u751f\u4e0d\u540c\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n<p>\u4e86\u89e3\u66f4\u591a\u5173\u4e8eCSS\u7684\u77e5\u8bc6\uff0c\u8bf7\u8bbf\u95ee\u6211\u4eec\u7684\u5b98\u7f51\uff1a<a href=\"https:\/\/idc.net\">https:\/\/idc.net<\/a>\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Css\u5165\u95e8: perspective-origin\uff08\u900f\u89c6\u539f\u70b9\uff09 Css\u5165\u95e8: perspective-orig [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[197854],"tags":[],"class_list":["post-238384","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/238384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/comments?post=238384"}],"version-history":[{"count":0,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/238384\/revisions"}],"wp:attachment":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media?parent=238384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/categories?post=238384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/tags?post=238384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}