{"id":2592,"date":"2012-09-07T01:05:18","date_gmt":"2012-09-06T17:05:18","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=2592"},"modified":"2023-08-23T01:36:36","modified_gmt":"2023-08-22T17:36:36","slug":"css3-3d-transform-perspective-animate-transition","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2012\/09\/css3-3d-transform-perspective-animate-transition\/","title":{"rendered":"\u597d\u5427\uff0cCSS3 3D transform\u53d8\u6362\uff0c\u4e0d\u8fc7\u5982\u6b64\uff01"},"content":{"rendered":"<h3>\u4e00\u3001\u5199\u5728\u524d\u9762\u7684\u79cb\u88e4<\/h3>\n<p>\u65e9\u5728\u53bb\u5e74\u7684\u53bb\u5e74\uff0c\u6211\u5c31\u5927\u8086\u4ecb\u7ecd\u4e86<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1268\">2D transform\u76f8\u5173\u5185\u5bb9<\/a>\u3002\u770b\u8fc7\u6d77\u8d3c\u738b\u7684\u90fd\u77e5\u9053\uff0c\u5e26D\u7684\u5bb6\u4f19\u90fd\u4e0d\u662f\u597d\u60f9\u7684\uff0c2D\u6211\u8f88\u5c1a\u53ef\u4ee5\u5e94\u4ed8\uff0c3D\u7684\u8bdd\uff0c\u5475\u5475\uff0c\u4f30\u8ba1\u6211\u7b49\u65e9\u5c31\u5728\u5343\u91cc\u4e4b\u5916\u88ab\u5176\u9738\u6c14\u9707\u6655\u4e86~~<\/p>\n<p>\u770b\u770b\u4e0b\u56fe\u5973\u5e1d\u7684\u52a8\u4f5c\u4ee5\u53ca\u795e\u60c5\uff0c\u5c31\u53ef\u4ee5\u77e5\u9053\u540d\u5b57\u5e26D\u7684\u5bb6\u4f19\u7684\u5389\u5bb3\uff01<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u8def\u98de\u5973\u5e1dD\u65cf\u7684\u5389\u5bb3 \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/nvdi-lufei-yamiedie.jpg\" title=\"\u8def\u98de\u5973\u5e1dD\u65cf\u7684\u5389\u5bb3\" class=\"alignnone\" width=\"500\" height=\"229\" \/><\/p>\n<p>\u6700\u8fd1\u6298\u817eiPad\u7684\u4e00\u4e9b\u4e1c\u897f\uff0c\u6709\u4e00\u4e9b3D\u6548\u679c\u7684\u4ea4\u4e92\u3002\u6709\u4e9b\u4e8b\u60c5\uff0c\u603b\u4ee5\u4e3a\u662f\u9065\u8fdc\u7684\u672a\u6765\uff0c\u8c01\u77e5\u771f\u6b63\u53d1\u751f\u7684\u65f6\u5019\u8bf4\u6765\u5c31\u6765\uff0c\u6bd4\u5982\u8bf4\u4e00\u9897\u60f3\u7ed3\u5a5a\u7684\u5fc3\uff0c\u53c8\u6bd4\u65b9\u8bf4\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u6298\u817e3D transform\u6548\u679c\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u54ed\u6ce3\u946b\u8868\u60c5 \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/cry.png\" title=\"\u54ed\u6ce3\u946b\u8868\u60c5\" class=\"alignleft\" style=\"float:left;\" width=\"150\" height=\"150\" \/><\/p>\n<p>\u7136\u800c\uff0c\u867d\u7136\u4ee5\u524d\u6298\u817e\u8fc7<a href=\"http:\/\/www.zhangxinxu.com\/study\/201001\/css3-animate-3d-effect-demo.html\">3D\u53d8\u6362\u6548\u679c(webkit)<\/a>\uff0c\u4f46\u90fd\u662f\u4f9d\u846b\u82a6\u753b\u74e2\uff0c\u56eb\u56f5\u541e\u67a3\uff0c\u771f\u6b63\u8981\u8f7b\u677e\u5b9e\u73b0\u60f3\u8981\u76843D\u6548\u679c\uff0c\u662f\u9700\u8981\u6df1\u5165\u7406\u89e3\u7684\uff0c\u4e8e\u662f\uff0c\u6b64\u65f6\u7684\u81ea\u5df1\u82e6\u903c\u4e86\uff0c\u6cea\u5954ing\u2026\u2026<\/p>\n<p>\u6728\u6709\u529e\u6cd5\uff0c\u627e\u8d44\u6599\uff0c\u81ea\u5df1\u601d\u8003\u5b66\u4e60\u5457\uff0c\u5f53\u6211\u770b\u5230\u4e0b\u9762\u8fd9\u5f20\u57fa\u672c\u56fe\u7684\u65f6\u5019\uff0c\u6211\u7684\u53f3\u4fa7\u7684\u6d53\u7709\u6bdb\u4e0d\u7531\u81ea\u4e3b\u6296\u52a8\u4e86\u4e24\u4e0b\uff0c\u5475\uff0c\u5475\u5475~~<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"3D\u53d8\u6362\u5750\u6807\u56fe\u89e3 \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/3d_axes.png\" title=\"3D\u53d8\u6362\u5750\u6807\u56fe\u89e3\" class=\"imgpad\" width=\"368\" height=\"402\" \/><\/p>\n<p>\u8fd9\u4e2a\u957f\u5f97\u50cf\u539f\u5b50\u6838\u4e00\u6837\u7684\u662f\u4ec0\u4e48\u4e1c\u4e1c\uff1f\u90a3\u50cf\u7ae0\u9c7c\u54e5\u4e00\u6837\u56db\u5904\u6a2a\u751f\u7684\u7bad\u5934\u597d\u5413\u4eba\u54e6\uff01\u540e\u9762\u600e\u4e48\u8fd8\u6709\u4e00\u4e2a\u82cd\u8747\u62cd\uff1f\uff1f <img decoding=\"async\" src=\"http:\/\/mat1.gtimg.com\/www\/mb\/images\/face\/26.gif\" \/> CSS\u597d\u53ef\u6015\uff0c\u6211\u8981\u56de\u53bb\u627e\u5988\u5988\u2026\u2026<\/p>\n<p>\u60f3\u5fc5\u5927\u90e8\u5206\u7684\u540c\u884c\u5e94\u8be5\u8ddf\u6211\u4e00\u6837\uff0c\u6ca1\u6709\u7231\u56e0\u65af\u5766\u7237\u7237\u7684\u667a\u5546\uff0c\u6ca1\u6709\u4e0a\u955c\u9700\u8981\u628a\u8868\u6458\u6389\u7684\u7238\u7238\u3002\u56e0\u6b64\uff0c\u90a3\u4e9b\u672f\u8bed\u8fde\u7bc7\u7684CSS3 3D transform\u4ecb\u7ecd\u7684\u8d44\u6599\u8fc7\u4e8e\u8000\u773c\uff0c\u65e0\u6cd5\u76f4\u89c6\u3002\u600e\u4e48\u529e\uff1f<\/p>\n<p>\u597d\u5427\uff0c\u4f5b\u5bb6\u6709\u4e91\uff0c\u6211\u4e0d\u5165\u5730\u72f1\u8c01\u5165\u5730\u72f1\u3002\u8fd9\u91cc\uff0c\u6211\u5c31\u4ece\u51e1\u4eba\u4eec\u7684\u89c6\u89d2\u8bf4\u8bf4CSS3 3D transform\u7684\u4e00\u4e9b\u4e1c\u897f\uff0c\u5e0c\u671b\u8bf4\u7684\u4e1c\u897f\u6bd4\u8f83\u4eb2\u6c11\uff0c\u4e0d\u8981\u5413\u7740\u5927\u5bb6\u3002<\/p>\n<h3>\u4e8c\u3001\u9996\u5148\uff0c\u60c5\u611f\u5316\u8ba4\u8bc6<\/h3>\n<p>\u6211\u89c9\u5f97\u5427\uff0c\u8981\u60f3\u7406\u89e3\u4e00\u4e2a\u4e1c\u897f\uff0c\u6700\u597d\u5148\u6709\u4e00\u4e9b\u611f\u6027\u7684\u8ba4\u8bc6\u3002<\/p>\n<p>CSS3\u4e2d\u76843D\u53d8\u6362\u6548\u679c\uff0c\u672c\u8d28\u4e0a\u5c31\u662f\u6211\u4eecOOXX\u65f6\u5019\u5404\u79cd\u59ff\u52bf\u7684\u53d8\u6362\uff0c\u53c8\u79f0\u5404\u79cd\u4f53\u4f4d\u7684\u53d8\u6362\u3002<\/p>\n<p>\u867d\u7136\u90fd\u662f\u6210\u5e74\u4eba\uff0c\u4f46\u8003\u8651\u5230\u4ecd\u6709\u4e0d\u5c11\u7a9d\u4e2d\u5f85\u5b88\u7684\u96cf\u9e1f\uff0c\u5982\u679c\u4e0a\u9762\u7684\u89e3\u91ca\u60f3\u4e0d\u8fc7\u6765\uff0c\u5c31\u60f3\u60f3\u4ee5\u4e0b\u8fd9\u4e9b\uff1a<br \/>\n<strong>1. <\/strong>\u4e0b\u56fe\u7684\u8fd9\u4e9b\u4eba\u5728\u5e72\u561b\uff1f<br \/>\n<img src= \"\/\/image.zhangxinxu.com\/image\/blog\/201209\/tiaoshui.jpg\" height=\"300\" \/><\/p>\n<p>\u8df3\u6c34\uff1fNO, No, No!! \u8bb0\u4f4f\uff0c\u4ed6\u4eec\u4e0d\u662f\u5728\u8df3\u6c34\uff0c\u662f\u5728\u505a3D\u53d8\u6362\uff01\uff01\uff01<\/p>\n<p><strong>2.<\/strong> \u4e0b\u56fe\u53ef\u7231baby\u5728\u5e72\u561b<img decoding=\"async\" src=\"http:\/\/mat1.gtimg.com\/www\/mb\/images\/face\/101.gif\" \/>\uff1f<br \/>\n<img decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/baby-move.jpg\" height=\"300\" \/><br \/>\n\u5e7f\u64ad\u4f53\u64cd\uff1fNO, No, No!! \u8bb0\u4f4f\uff0c\u4ed6\u4e0d\u662f\u5728\u505a\u64cd\uff0c\u662f\u5728\u505a3D\u53d8\u6362\uff01\uff01\uff01<\/p>\n<p><strong>3.<\/strong> \u6765\u52302\u6b21\u5143\uff0c\u4e0b\u56fe\u8fd9\u4e2a\u59b9\u5b50\u5728\u8fd9\u5e45\u59ff\u6001\u79f0\u4e3a\uff1a<br \/>\n<img decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/maimeng.jpg\" height=\"300\" style=\"vertical-align:middle;\" \/> <img loading=\"lazy\" decoding=\"async\" alt=\"\u946b\u8868\u60c5 \u6027\u611f \u8272\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/sex.png\" title=\"\u946b\u8868\u60c5 \u6027\u611f \u8272\" width=\"150\" height=\"150\" style=\"margin-left: 100px; vertical-align:middle;\" \/><br \/>\n\u5356\u840c\uff1fNO, No, No!! \u8bb0\u4f4f\uff0c\u4ed6\u4e0d\u662f\u5728\u5356\u840c\uff0c\u662f\u5728\u505a3D\u53d8\u6362\uff01\uff01\uff01<\/p>\n<p>\u54c8\u54c8\u54c8\u54c8\uff0c\u662f\u5426\u610f\u8bc6\u5230\uff1a\u5728\u73b0\u5b9e\u4e16\u754c\u4e2d\uff0c\u4e00\u5207\u7684\u52a8\u4f5c\uff0c\u90fd\u662f\u5c5e\u4e8e3D transform\u53d8\u6362\u3002 \u56e0\u6b64\uff0c\u8981\u5b66\u4e60\u4e0e\u7406\u89e33D transform\u53d8\u6362\u5f88\u7b80\u5355\uff0c\u4e00\u53e5\u8bdd\uff0c\u5230\u73b0\u5b9e\u4e16\u754c\u627e\u4e2a\u4e1c\u897f\u6620\u5c04\u4e00\u4e0b\u5373\u53ef\u3002<\/p>\n<h3>\u4e09\u3001\u8ba4\u8bc6\u7684\u7a81\u7834\u53e3\uff1arotateX, rotateY, rotateZ<\/h3>\n<p>3D transform\u4e2d\u6709\u4e0b\u9762\u8fd9\u4e09\u4e2a\u65b9\u6cd5\uff1a<\/p>\n<ul id=\"ul\">\n<li><code>rotateX( angle )<\/code><\/li>\n<li><code>rotateY( angle )<\/code><\/li>\n<li><code>rotateZ( angle )<\/code><\/li>\n<\/ul>\n<p>\u7406\u89e3\u4e86\u8fd9\u4e09\u4e2a\u65b9\u6cd5\uff0c\u540e\u9762\u66f4\u96be\u61c2\u7684<code>perspective<\/code>\u5c31\u597d\u4e0b\u624b\u4e86\uff0c\u53ef\u4ee5\u8bf4\u662f\u7a81\u7834\u53e3\uff01<\/p>\n<p><code>rotate<\/code>\u65cb\u8f6c\u7684\u610f\u601d\uff0c<code>rotateX<\/code>\u65cb\u8f6cX\u8f74\uff0c<code>rotateY<\/code>\u65cb\u8f6cY\u8f74\uff0c<code>rotateZ<\/code>\u65cb\u8f6cZ\u8f74\u2026\u2026<img decoding=\"async\" src=\"http:\/\/mat1.gtimg.com\/www\/mb\/images\/face\/34.gif\" \/><\/p>\n<p>\u4ec0\u4e48X\u8f74\/Y\u8f74\/Z\u8f74\uff0c\u8fd9\u51e0\u4e2a\u8bcd\u4ece\u6211\u5634\u91cc\u4e00\u51fa\u6765\uff0c\u522b\u8bf4\u4f60\u4eec\uff0c\u6211\u81ea\u5df1\u90fd\u6655\u4e86~~<\/p>\n<p>\u8d76\u5feb\uff0c\u4ece\u73b0\u5b9e\u4e16\u754c\u627e\u5bf9\u5e94\u4e1c\u897f\u7406\u89e3\uff08\u53c2\u7167\u4e0b\u9762\u4eba\u7684\u65cb\u8f6c\uff09\uff1a<br \/>\n\u90b9\u51ef\u7684\u4f53\u64cd\u5355\u6760\u8fd0\u52a8\u662f<code>rotateX<\/code>\uff1b<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u5355\u6760\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/dangang.jpg\" title=\"\u5355\u6760\" class=\"alignnone\" width=\"300\" height=\"226\" \/><\/p>\n<p>\u8521\u4f9d\u6797\u59d0\u59d0\u7684\u94a2\u7ba1\u821e\u662f<code>rotateY<\/code>\uff1b<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u8521\u4f9d\u6797-\u94a2\u7ba1\u821e \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/gangguan-jolin.jpg\" title=\"\u8521\u4f9d\u6797-\u94a2\u7ba1\u821e\" class=\"alignnone\" width=\"237\" height=\"300\" \/><\/p>\n<p>\u65cb\u8f6c\u98de\u5200\u7684\u7279\u6280\u8868\u6f14\u662f<code>rotateZ<\/code>\u3002<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u98de\u5200\u9b54\u672f\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/feidao.jpg\" title=\"\u98de\u5200\u9b54\u672f\" class=\"alignnone\" width=\"330\" height=\"227\" \/><\/p>\n<p>\u8fd8\u662f\u7406\u89e3\u4e0d\u8fc7\u6765\uff1f\u597d\u5427\uff0c\u5047\u8bbe\u4f60\u662f\u7537\u7684\uff0c\u4ee5\u4f60\u7684\u5973\u670b\u53cb\u4e3e\u4f8b\uff0c\u5047\u5982\u539f\u672c\u4f60\u548c\u5979\u9762\u5bf9\u9762\u7ad9\u7740\uff0c\u7136\u540e\u4f60\u2014\u2014<br \/>\n\u4ece\u6b63\u9762\u5c06\u5176\u63a8\u5230\u5c31\u662f<code>rotateX<\/code>\uff1b<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u59b9\u5b50\u63a8\u5230\u4e0etransform rotateX \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/tuidao-x.jpg\" title=\"\u59b9\u5b50\u63a8\u5230\u4e0etransform rotateX\" class=\"alignnone\" width=\"225\" height=\"300\" \/><\/p>\n<p>\u8ba9\u5176\u539f\u5730\u8f6c\u4e2a90\u5ea6\u6b23\u8d4f\u5176\u4fa7\u9762\u7684\u4e30\u6ee1\u66f2\u7ebf\u5c31\u662f<code>rotateY<\/code>\uff1b<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u59b9\u5b50\u63a8\u5230\u4e0etransform rotateY \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/tuidao-y.jpg\" title=\"\u59b9\u5b50\u63a8\u5230\u4e0etransform rotateY\" class=\"alignnone\" width=\"217\" height=\"300\" \/><\/p>\n<p>\u628a\u59b9\u5b50\u62b1\u5230\u5e8a\u4e0a\u4fa7\u9762\u8eba\u7740\u5c31\u662f<code>rotateZ<\/code>\u3002<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u59b9\u5b50\u63a8\u5230\u4e0etransform rotateZ \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/tuidao-z.jpg\" title=\"\u59b9\u5b50\u63a8\u5230\u4e0etransform rotateZ\" class=\"alignnone\" width=\"300\" height=\"188\" \/><\/p>\n<p>\u4e8e\u662f\uff0c\u4e0b\u9762CSS\u4e16\u754c\u4e2d\u7684\u7b80\u53553D\u6548\u679c\u662f\u4e0d\u662f\u66f4\u5bb9\u6613\u7406\u89e3\u4e86\u5462\uff1f\uff01<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"transform rotateX(45deg)\u7684\u6548\u679c\u56fe \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_175406.png\" title=\"transform rotateX(45deg)\u7684\u6548\u679c\u56fe\" class=\"alignnone\" width=\"318\" height=\"230\" style=\"vertical-align:top; margin-left:-20px;\" \/> <img loading=\"lazy\" decoding=\"async\" alt=\"transform rotateY(45deg)\u7684\u6548\u679c\u56fe \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_175458.png\" title=\"transform rotateY(45deg)\u7684\u6548\u679c\u56fe\" class=\"alignnone\" width=\"276\" height=\"252\" style=\"vertical-align:top;\" \/> <img loading=\"lazy\" decoding=\"async\" alt=\"transform rotateZ(45deg)\u7684\u6548\u679c\u56fe \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_175551.png\" title=\"transform rotateZ(45deg)\u7684\u6548\u679c\u56fe\" class=\"alignnone\" width=\"311\" height=\"298\" style=\"vertical-align:top;\" \/><\/p>\n<h3>\u56db\u3001\u5fc5\u4e0d\u53ef\u5c11\u7684perspective\u5c5e\u6027<\/h3>\n<p><code>perspective<\/code>\u7684\u4e2d\u6587\u610f\u601d\u662f\uff1a\u900f\u89c6\uff0c\u89c6\u89d2\uff01<\/p>\n<p><code>perspective<\/code>\u5c5e\u6027\u7684\u5b58\u5728\u4e0e\u5426\u51b3\u5b9a\u4e86\u4f60\u6240\u770b\u5230\u7684\u662f2\u6b21\u5143\u7684\u8fd8\u662f3\u6b21\u5143\u7684\uff0c\u4e5f\u5c31\u662f\u662f2D transform\u8fd8\u662f3D transform. \u8fd9\u4e0d\u96be\u7406\u89e3\uff0c\u6ca1\u6709\u900f\u89c6\uff0c\u4e0d\u62103D.<\/p>\n<p>\u6211\u4eec\u521d\u4e2d\u5b66\u7f8e\u672f\uff0c\u6216\u8005\u5b66\u5efa\u7b51\u7684\u540c\u5b66\u80af\u5b9a\u63a5\u89e6\u8fc7\u900f\u89c6\u7684\u4e00\u4e9b\u4e1c\u897f\uff1a<br \/>\n<img decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/toushi.png\" height=\"183\" alt=\"3D\u900f\u89c6 \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" \/> <img decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/toushi2.png\" height=\"183\" alt=\"3D\u900f\u89c6 \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" \/><\/p>\n<p>\u4e0d\u8fc7\uff0cCSS3 3D transform\u4e2d\u7684\u900f\u89c6\u7684\u900f\u89c6\u70b9\u4e0e\u4e0a\u9762\u4e24\u5f20\u793a\u4f8b\u56fe\u662f\u4e0d\u540c\u7684\uff1aCSS3 3D transform\u7684<strong>\u900f\u89c6\u70b9\u662f\u5728\u6d4f\u89c8\u5668\u7684\u524d\u65b9<\/strong>\uff01<\/p>\n<p>\u6216\u8005\u8fd9\u4e48\u7406\u89e3\u5427\uff1a\u663e\u793a\u5668\u4e2d3D\u6548\u679c\u5143\u7d20\u7684\u900f\u89c6\u70b9\u5728\u663e\u793a\u5668\u7684\u4e0a\u65b9\uff08\u4e0d\u662f\u540e\u9762\uff09\uff0c\u8fd1\u4f3c\u5c31\u662f\u6211\u4eec\u773c\u775b\u6240\u5728\u65b9\u4f4d\uff01<\/p>\n<p>\u6bd4\u65b9\u8bf4\uff0c\u4e00\u4e2a1680\u50cf\u7d20\u5bbd\u7684\u663e\u793a\u5668\u4e2d\u6709\u5f20\u7f8e\u5973\u56fe\u7247\uff0c\u5e94\u7528\u4e863D transform\uff0c\u540c\u65f6\uff0c\u8be5\u5143\u7d20\u6216\u8be5\u5143\u7d20\u7236\u8f88\u5143\u7d20\u8bbe\u7f6e\u7684<code>perspective<\/code>\u5927\u5c0f\u4e3a2000\u50cf\u7d20\u3002\u5219\u8fd9\u5f20\u7f8e\u5973\u591a\u5448\u73b0\u76843D\u6548\u679c\u5c31\u8ddf\u4f60\u672c\u4eba\u57281.2\u4e2a\u663e\u793a\u5668\u5bbd\u5ea6\u7684\u5730\u65b9(1680*1.2\u22482000)\u770b\u5230\u7684\u771f\u5b9e\u6548\u679c\u4e00\u81f4\uff01\uff01<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"1680\u5bbd\u5ea6\u50cf\u7d20\u663e\u793a\u5668\u4e0e3D transform\u89c6\u89d2\u5927\u5c0f\u793a\u610f \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/3d-distance.jpg\" title=\"1680\u5bbd\u5ea6\u50cf\u7d20\u663e\u793a\u5668\u4e0e3D transform\u89c6\u89d2\u5927\u5c0f\u793a\u610f\" class=\"alignnone\" width=\"434\" height=\"291\" \/><\/p>\n<h3>\u4e94\u3001translateZ\u5e2e\u4f60\u5bfb\u627e\u900f\u89c6\u4f4d\u7f6e<\/h3>\n<p>\u5982\u679c\u8bf4<code>rotateX<\/code>\/<code>rotateY<\/code>\/<code>rotateZ<\/code>\u53ef\u4ee5\u5e2e\u52a9\u7406\u89e3\u4e09\u7ef4\u5750\u6807\uff0c\u5219<code>translateZ<\/code>\u5219\u53ef\u4ee5\u5e2e\u4f60\u7406\u89e3\u900f\u89c6\u4f4d\u7f6e\u3002<\/p>\n<p>\u6211\u4eec\u90fd\u77e5\u9053\u8fd1\u5927\u8fdc\u5c0f\u7684\u9053\u7406\uff0c\u5bf9\u4e8e\u6ca1\u6709<code>rotateX<\/code>\u4ee5\u53ca<code>rotateY<\/code>\u7684\u5143\u7d20\uff0c<code>translateZ<\/code>\u7684\u529f\u80fd\u5c31\u662f\u8ba9\u5143\u7d20\u5728\u81ea\u5df1\u7684\u773c\u524d\u6216\u8fd1\u6216\u8fdc\u3002\u6bd4\u65b9\u8bf4\uff0c\u6211\u4eec\u8bbe\u7f6e\u5143\u7d20<code>perspective<\/code>\u4e3a201\u50cf\u7d20\uff0c\u5982\u4e0b\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>perspective: 201px;<\/pre>\n<\/div>\n<p>\u5219\u5176\u5b50\u5143\u7d20\uff0c\u8bbe\u7f6e\u7684<code>translateZ<\/code>\u503c\u8d8a\u5c0f\uff0c\u5219\u5b50\u5143\u7d20\u5927\u5c0f\u8d8a\u5c0f\uff08\u56e0\u4e3a\u5143\u7d20\u8fdc\u53bb\uff0c\u6211\u4eec\u773c\u775b\u770b\u5230\u7684\u5c31\u4f1a\u53d8\u5c0f\uff09\uff1b<code>translateZ<\/code>\u503c\u8d8a\u5927\uff0c\u8be5\u5143\u7d20\u4e5f\u4f1a\u8d8a\u6765\u8d8a\u5927\uff0c\u5f53<code>translateZ<\/code>\u503c\u975e\u5e38\u63a5\u8fd1201\u50cf\u7d20\uff0c\u4f46\u662f\u4e0d\u8d85\u8fc7201\u50cf\u7d20\u7684\u65f6\u5019\uff08\u5982200\u50cf\u7d20\uff09\uff0c\u8be5\u5143\u7d20\u7684\u5927\u5c0f\u5c31\u4f1a\u6491\u6ee1\u6574\u4e2a\u5c4f\u5e55\uff08\u5982\u679c\u7236\u8f88\u5143\u7d20\u6ca1\u6709\u7c7b\u4f3coverflow:hidden\u7684\u9650\u5236\u7684\u8bdd\uff09\u3002\u56e0\u4e3a\u8fd9\u4e2a\u65f6\u5019\uff0c\u5b50\u5143\u7d20\u6b63\u597d\u79fb\u5230\u4e86\u4f60\u7684\u773c\u775b\u524d\u9762\uff0c\u6240\u8c13\u201c\u4e00\u53f6\u853d\u76ee\uff0c\u4e0d\u89c1\u6cf0\u5c71\u201d\uff0c\u5c31\u662f\u8fd9\u4e48\u56de\u4e8b\u3002\u5f53<code>translateZ<\/code>\u503c\u518d\u53d8\u5927\uff0c\u8d85\u8fc7201\u50cf\u7d20\u7684\u65f6\u5019\uff0c\u8be5\u5143\u7d20\u770b\u4e0d\u89c1\u4e86\u2014\u2014\u8fd9\u5f88\u597d\u7406\u89e3\uff1a\u6211\u4eec\u662f\u770b\u4e0d\u89c1\u773c\u775b\u540e\u9762\u7684\u4e1c\u897f\u7684\uff01<\/p>\n<p>\u518d\u751f\u52a8\u7684\u6587\u5b57\u63cf\u8ff0\u4e5f\u4e0d\u5982\u4e00\u4e2a\u5b9e\u4f8b\u6765\u5f97\u76f4\u89c2\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a class=\"a_link\" target=\"_blank\" href=\"http:\/\/www.zhangxinxu.com\/study\/201209\/transform-perspective-translateZ.html\">translateZ\u65b9\u6cd5\u8f85\u52a9\u7406\u89e3perspective\u89c6\u89d2demo<\/a><\/p>\n<p>\u5efa\u8baeChrome\u6d4f\u89c8\u5668\u4e0b\u8bbf\u95ee\uff0c\u53ef\u4ee5\u4f7f\u7528<code>range<\/code>\u63a7\u4ef6\uff0c\u6f14\u793a\u6548\u679c\u66f4\u8d5e\uff0c\u5982\u4e0b\u622a\u56fe\uff1a-100\u65f6\u5019\u6700\u5c0f\uff0c200\u65f6\u5019\u8d85\u7ea7\u6ee1\u5c4f\uff08\u5782\u76f4\u65b9\u5411\u56e0\u7279\u6b8a\u5e03\u5c40\u9650\u5236\u6ca1\u6709\u663e\u793a\uff09\uff0c250\u7684\u65f6\u5019\u56e0\u4e3a\u5143\u7d20\u5df2\u7ecf\u5728\u89c6\u70b9\u4e4b\u5916\uff0c\u56e0\u6b64\u662f\u4e00\u7247\u7a7a\u767d\uff08\u770b\u4e0d\u89c1\uff09\u3002<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"translateZ -100\u50cf\u7d20\u6700\u8fdc\u8ddd\u79bb\u6700\u5c0f\u663e\u793a \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_220540.png\" title=\"-100\u50cf\u7d20\u6700\u8fdc\u8ddd\u79bb\u6700\u5c0f\u663e\u793a \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" class=\"alignnone\" width=\"366\" height=\"292\" \/> <img loading=\"lazy\" decoding=\"async\" alt=\"translateZ 200\u50cf\u7d20\u65f6\u5019\u8d85\u7ea7\u5927\u7684\u663e\u793a\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_220622.png\" title=\"translateZ 200\u50cf\u7d20\u65f6\u5019\u8d85\u7ea7\u5927\u7684\u663e\u793a\" class=\"alignnone\" width=\"378\" height=\"328\" \/> <img loading=\"lazy\" decoding=\"async\" alt=\"translateZ\u4e3a250\u50cf\u7d20\u65f6\u5019\u5143\u7d20\u5728\u89c6\u533a\u4e4b\u5916\uff0c\u56e0\u6b64\u770b\u4e0d\u89c1\u662f\u7a7a\u767d \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_220711.png\" title=\"translateZ\u4e3a250\u50cf\u7d20\u65f6\u5019\u5143\u7d20\u5728\u89c6\u533a\u4e4b\u5916\uff0c\u56e0\u6b64\u770b\u4e0d\u89c1\u662f\u7a7a\u767d\" class=\"alignnone\" width=\"376\" height=\"326\" \/><\/p>\n<h3>\u516d\u3001perspective\u5c5e\u6027\u7684\u4e24\u79cd\u4e66\u5199<\/h3>\n<p><code>perspective<\/code>\u5c5e\u6027\u6709\u4e24\u79cd\u4e66\u5199\u5f62\u5f0f\uff0c\u4e00\u79cd\u7528\u5728\u821e\u53f0\u5143\u7d20\u4e0a\uff08\u52a8\u753b\u5143\u7d20\u4eec\u7684\u5171\u540c\u7236\u8f88\u5143\u7d20\uff09\uff1b\u7b2c\u4e8c\u79cd\u5c31\u662f\u7528\u5728\u5f53\u524d\u52a8\u753b\u5143\u7d20\u4e0a\uff0c\u4e0etransform\u7684\u5176\u4ed6\u5c5e\u6027\u5199\u5728\u4e00\u8d77\u3002\u5982\u4e0b\u4ee3\u7801\u793a\u4f8b\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>.stage {\r\n    perspective: 600px;\r\n}<\/pre>\n<\/div>\n<p>\u4ee5\u53ca\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>#stage .box {\r\n    transform: perspective(600px) rotateY(45deg);\r\n}<\/pre>\n<\/div>\n<p>\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a class=\"a_link\" target=\"_blank\" href=\"http:\/\/www.zhangxinxu.com\/study\/201209\/transform-perspective-two-write-style.html\">perspective\u5c5e\u6027\u7684\u4e24\u79cd\u4e66\u5199demo<\/a><\/p>\n<p>\u7ed3\u679c\u5982\u4e0b\u7f29\u7565\u56fe\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"CSS3 transform perspective\u4e24\u79cd\u4e66\u5199\u5f62\u5f0fdemo\u6548\u679c\u622a\u56fe \" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_222328.png\" title=\"CSS3 transform perspective\u4e24\u79cd\u4e66\u5199\u5f62\u5f0fdemo\u6548\u679c\u622a\u56fe\" class=\"alignnone\" width=\"264\" height=\"267\" \/><\/p>\n<p>\u4ece\u4e0a\u56fe\u6211\u4eec\u8c8c\u4f3c\u53ef\u4ee5\u770b\u5230\uff0c\u867d\u7136\u4e66\u5199\u7684\u5f62\u5f0f\uff0c\u5c5e\u6027\u540d\u79f0\u4e0d\u4e00\u81f4\uff0c\u4f46\u662f\uff0c\u6548\u679c\u8c8c\u4f3c\u662f\u4e00\u6837\u7684~~\u679c\u771f\u662f\u8fd9\u6837\u5417\uff1f\uff1f\uff1f<\/p>\n<p>\u5b9e\u9645\u4e0a\u4e0d\u7136\uff0c\u4e0a\u9762\u7684demo\u4e0a\u4e0b\u4e24\u4e2a\u6548\u679c\u4e4b\u6240\u4ee5\u4f1a\u4e00\u6837\uff0c\u662f\u56e0\u4e3a\u821e\u53f0\u4e0a\u53ea\u6709\u4e00\u4e2a\u5143\u7d20\uff0c\u56e0\u6b64\uff0c\u53d1\u751f\u4e86\u5de7\u5408\uff0c\u5176\u6b63\u597d\u8868\u73b0\u4e00\u6837\u4e86\u3002\u5982\u679c\uff0c\u5982\u679c\u821e\u53f0\u4e0a\u6709\u5f88\u591a\u4e2a\u5143\u7d20\uff0c\u5219\u4e24\u79cd\u4e66\u5199\u5f62\u5f0f\u7684\u8868\u73b0\u5dee\u5f02\u5c31\u4f1a\u7acb\u9a6c\u663e\u793a\u51fa\u6765\u4e86\uff01<\/p>\n<p>\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a class=\"a_link\" target=\"_blank\" href=\"http:\/\/www.zhangxinxu.com\/study\/201209\/transform-perspective-same-rotate.html\">\u821e\u53f0\u591a\u5143\u7d20\u4e0b\u7684perspective\u4e24\u79cd\u4e66\u5199\u5bf9\u6bd4demo<\/a><\/p>\n<p>demo\u9875\u9762\u6548\u679c\u7f29\u7565\u56fe\u5982\u4e0b\uff08\u56e0\u80cc\u666f\u8272\u968f\u673a\uff0c\u53ef\u80fd\u4e0e\u4e0b\u56fe\u6709\u5dee\u5f02\uff09\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u4e0d\u540ctransform perspective\u4e66\u5199\u4e0b\u7684\u8868\u73b0\u5dee\u5f02\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_222911.png\" title=\"\u4e0d\u540ctransform perspective\u4e66\u5199\u4e0b\u7684\u8868\u73b0\u5dee\u5f02\" class=\"alignnone\" width=\"414\" height=\"332\" \/><\/p>\n<p>\u597d\u5427\uff0c\u56fe\u4e2d\u7684\u6548\u679c\u5176\u5b9e\u4e0d\u96be\u7406\u89e3\u3002\u4e0a\u9762\u821e\u53f0\u6574\u4e2a\u4f5c\u4e3a\u900f\u89c6\u5143\u7d20\uff0c\u56e0\u6b64\uff0c\u663e\u7136\uff0c\u6211\u4eec\u770b\u5230\u7684\u6bcf\u4e2a\u5b50\u5143\u7d20\u7684\u5f62\u4f53\u90fd\u662f\u4e0d\u4e00\u6837\u7684\uff1b\u800c\u4e0b\u9762\uff0c\u6bcf\u4e2a\u5143\u7d20\u90fd\u6709\u4e00\u4e2a\u81ea\u5df1\u7684\u89c6\u70b9\uff0c\u56e0\u6b64\uff0c\u663e\u7136\uff0c\u56e0\u4e3arotateY\u7684\u89d2\u5ea6\u662f\u4e00\u6837\u7684\uff0c\u56e0\u6b64\uff0c\u770b\u4e0a\u53bb\u7684\u6548\u679c\u4e5f\u5c31\u4e00\u6a21\u4e00\u6837\u4e86\uff01<\/p>\n<p><strong>\u5173\u4e8eChrome\u6d4f\u89c8\u5668\u4ee5\u53ca\u900f\u89c6\u76f2\u533a<\/strong><br \/>\n\u5728Chrome\u6d4f\u89c8\u5668\u4e0b\uff0c\u8981\u60f3\u770b\u5230\u5b8c\u6574\u76843D\u6548\u679c\uff0c\u8fd8\u9700\u89813D\u53d8\u6362\u5143\u7d20\u6b63\u597d\u5728\u7a97\u4f53\u7684\u5782\u76f4\u5c45\u4e2d\u4f4d\u7f6e\uff0c\u56e0\u6b64\uff0c\u5728Chrome\u6d4f\u89c8\u5668\u4e0b\uff0c\u751f\u6210\u4e86\u4e24\u4e2a\u4f4d\u7f6e\u5c45\u4e2d\u7684\u6309\u94ae\uff0c\u5e2e\u52a9\u60a8\u770b\u5230\u60f3\u8981\u7684\u6548\u679c\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"Chrome\u6d4f\u89c8\u5668\u4e0b\u4f4d\u7f6e\u5c45\u4e2d\u6309\u94ae \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_224317.png\" title=\"Chrome\u6d4f\u89c8\u5668\u4e0b\u4f4d\u7f6e\u5c45\u4e2d\u6309\u94ae\" class=\"alignnone\" width=\"277\" height=\"146\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"Chrome\u6d4f\u89c8\u5668\u4e0b\u821e\u53f0\u5782\u76f4\u5c45\u4e2d3D\u6548\u679c\u663e\u793a\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_224348.png\" title=\"Chrome\u6d4f\u89c8\u5668\u4e0b\u821e\u53f0\u5782\u76f4\u5c45\u4e2d3D\u6548\u679c\u663e\u793a\" class=\"alignnone\" width=\"365\" height=\"253\" \/><\/p>\n<p>\u5f53\u6211\u4eec\u6539\u53d8\u7b2c\u4e00\u4e2a<code>range<\/code>\u63a7\u4ef6\u503c\u4e3a200\u7684\u65f6\u5019\uff0c\u60a8\u4f1a\u53d1\u73b0\u53f3\u4fa7\u7b2c\u4e09\u4e2a\u5143\u7d20\u770b\u4e0d\u89c1\u4e86\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"200\u503c\u7684\u65f6\u5019\u6709\u5143\u7d20\u770b\u4e0d\u89c1\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-05_224822.png\" title=\"200\u503c\u7684\u65f6\u5019\u6709\u5143\u7d20\u770b\u4e0d\u89c1\" class=\"alignnone\" width=\"514\" height=\"250\" \/><\/p>\n<p>\u8fd9\u4e0d\u96be\u7406\u89e3\uff0c\u524d\u9762\u4e00\u6392\u95e8\uff0c\u6bcf\u4e2a\u95e8\u90fd\u662f1\u7c73\uff0c\u4f60\u8ddd\u79bb\u95e82\u7c73\uff0c\u663e\u793a\uff0c\u5f53\u6240\u6709\u95e8\u90fd\u5f00\u4e8645\u00b0\u89d2\u7684\u65f6\u5019\uff0c\u6b64\u65f6\uff0c\u8ddd\u79bb\u4e2d\u95f4\u95e8\u53f3\u4fa7\u7684\u7b2c\u4e8c\u4e2a\u95e8\u6b63\u597d\u4e0e\u4f60\u7684\u89c6\u7ebf\u5e73\u884c\uff0c\u8fd9\u4e2a\u95e8\u7684\u95e8\u9762\u663e\u7136\u5c31\u4ec0\u4e48\u4e5f\u770b\u4e0d\u5230\u3002\u8fd9\u5c31\u662f\u4e3a\u4ec0\u4e48\u4e0a\u9762\u53f3\u4fa7\u7b2c\u4e09\u4e2a\u95e8\u4e00\u7247\u7a7a\u767d\u7684\u5143\u7d20\u2014\u2014\u7279\u5b9a\u7684\u89c6\u89d2\u4ee5\u53ca\u8ddd\u79bb\u5f62\u6210\u7684\u89c6\u89c9\u76f2\u533a\u3002<\/p>\n<h3>\u4e03\u3001\u7406\u89e3perspective-origin<\/h3>\n<p><code>perspective-origin<\/code>\u8fd9\u4e2a\u5c5e\u6027\u8d85\u7ea7\u597d\u7406\u89e3\uff0c\u8868\u793a\u4f60\u90a3\u773c\u775b\u770b\u7684\u4f4d\u7f6e\u3002\u9ed8\u8ba4\u5c31\u662f\u6240\u770b\u821e\u53f0\u6216\u5143\u7d20\u7684\u4e2d\u5fc3\u3002\u6709\u65f6\u5019\uff0c\u6211\u4eec\u5bf9\u4e2d\u5fc3\u7684\u4f4d\u7f6e\u662f\u4e0d\u611f\u5174\u8da3\u7684\uff0c\u5e0c\u671b\u89c6\u7ebf\u653e\u5728\u5176\u4ed6\u4e00\u4e9b\u5730\u65b9\u3002\u6bd4\u65b9\u8bf4\uff08\u89c1\u4f4d\u7f6e\u548c\u767e\u5206\u6bd4\u793a\u610f\uff09\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u4e0d\u540c\u89c6\u7ebf\u843d\u5730\u4f4d\u7f6e\u5bf9\u5e94\u4e0d\u540c\u7684perspective-origin\u503c\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/what-are-u-looking.png\" title=\"\u4e0d\u540c\u89c6\u7ebf\u843d\u5730\u4f4d\u7f6e\u5bf9\u5e94\u4e0d\u540c\u7684perspective-origin\u503c\" class=\"alignnone\" width=\"425\" height=\"300\" \/><\/p>\n<p>\u4e0b\u9762\u4e3a\u7acb\u65b9\u4f53\u7684\u5b9e\u9645\u5e94\u7528\u900f\u89c6\u6548\u679c\u56fe\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>perspective-origin: 25% 75%;<\/pre>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\u7acb\u65b9\u4f53\u4e0d\u540c\u900f\u89c6\u89d2\u5ea6\u7684\u6548\u679c \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/perspective02.png\" title=\"\u7acb\u65b9\u4f53\u4e0d\u540c\u900f\u89c6\u89d2\u5ea6\u7684\u6548\u679c\" class=\"alignnone\" width=\"258\" height=\"255\" \/><\/p>\n<h3>\u516b\u3001transform-style: preserve-3d<\/h3>\n<p><code>transform-style<\/code>\u5c5e\u6027\u4e5f\u662f3D\u6548\u679c\u4e2d\u7ecf\u5e38\u4f7f\u7528\u7684\uff0c\u5176\u4e24\u4e2a\u53c2\u6570\uff0c<code>flat|preserve-3d<\/code>. \u524d\u8005<code>flat<\/code>\u4e3a\u9ed8\u8ba4\u503c\uff0c\u8868\u793a\u5e73\u9762\u7684\uff1b\u540e\u8005<code>preserve-3d<\/code>\u8868\u793a3D\u900f\u89c6\u3002<\/p>\n<p><code>preserve-3d<\/code>\u7b26\u5408\u6211\u4eec\u771f\u5b9e\u4e16\u754c\u7684\u601d\u7ef4\u8ba4\u8bc6\u3002\u6bd4\u65b9\u8bf4\uff0c\u4f60\u8ba9\u59b9\u5b50\u53f3\u8f6c\u4e8645\u5ea6\uff0c\u6b64\u65f6\u59b9\u5b50\u8111\u888b\u5de6\u8f6c45\u5ea6\u60f3\u4f60\u5410\u820c\u5356\u840c\uff0c\u59b9\u5b50\u7684\u8138\u86cb\u5e94\u8be5\u548c\u4f60\u662f\u9762\u5bf9\u9762\u5e73\u884c\u7684\u3002<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u59b9\u5b50\u63a8\u5230\u4e0etransform rotateY \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/tuidao-y.jpg\" title=\"\u8eab\u4f53\u65cb\u8f6c\u8138\u4e5f\u65cb\u8f6c\" class=\"alignleft\" width=\"108\" height=\"150\" \/><br \/>\n\u5e94\u7528<code>transform-style: preserve-3d<\/code>\u58f0\u660e\u7684\u5143\u7d20\u786e\u5b9e\u662f\u8fd9\u6837\u8868\u73b0\u7684\uff0c\u4f46\u662f\uff0c\u5982\u679c\u4f7f\u7528\u9ed8\u8ba4\u7684<code>flat<\/code>\u503c\uff0c\u5176\u6548\u679c\u8868\u73b0\u2014\u2014\u6055\u6211\u60f3\u8c61\u529b\u6709\u9650\u2014\u2014\u60f3\u4e0d\u901a\uff1a\u59b9\u5b50\u7684\u8138\u8fd8\u662f\u5de6\u8f6c45\u5ea6\u7684\uff0c\u540c\u65f6\u8111\u888b\u4f3c\u4e4e\u79fb\u5230\u4e86\u8eab\u4f53\u4ee5\u5916\u7684\u5730\u65b9<img decoding=\"async\" src=\"http:\/\/mat1.gtimg.com\/www\/mb\/images\/face\/26.gif\" \/>\uff01<\/p>\n<p>\u56e0\u6b64\uff0c\u57fa\u672c\u4e0a\uff0c\u6211\u4eec\u60f3\u8981\u6839\u636e\u73b0\u5b9e\u7ecf\u9a8c\u5b9e\u73b0\u4e00\u4e9b3D\u6548\u679c\u7684\u65f6\u5019\uff0c<code>transform-style: preserve-3d<\/code>\u662f\u5c11\u4e0d\u4e86\u7684\u3002\u4e00\u822c\u800c\u8a00\uff0c\u8be5\u58f0\u660e\u5e94\u7528\u57283D\u53d8\u6362\u7684\u5144\u5f1f\u5143\u7d20\u4eec\u7684\u7236\u5143\u7d20\u4e0a\uff0c\u4e5f\u5c31\u662f\u821e\u53f0\u5143\u7d20\u3002<\/p>\n<h3>\u4e5d\u3001backface-visibility<\/h3>\n<p>\u5728\u663e\u793a\u4e16\u754c\u4e2d\uff0c\u6211\u4eec\u65e0\u6cd5\u7a7f\u8fc7\u8f6f\u59b9A\u770b\u5230\u5176\u8eab\u540e\u7684\u8f6f\u59b9B\u6216C\u6216D\uff1b\u4f46\u662f\uff0c\u5728CSS3\u76843D\u4e16\u754c\u4e2d\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u662f\u53ef\u4ee5\u770b\u5230\u80cc\u540e\u7684\u5143\u7d20\uff01<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u770b\u4e0d\u5230\u540e\u9762\u7684\u8f6f\u59b9\uff0c\u54e6\u5475\u5475,  backface-visibility, \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/ruanmei.png\" title=\"\u770b\u4e0d\u5230\u540e\u9762\u7684\u8f6f\u59b9\uff0c\u54e6\u5475\u5475\" class=\"alignnone\" width=\"300\" height=\"182\" \/><\/p>\n<p>\u56e0\u6b64\uff0c\u4e3a\u4e86\u5207\u5408\u5b9e\u9645\uff0c\u6211\u4eec\u5e38\u5e38\u4f1a\u8fd9\u6837\u8bbe\u7f6e\uff0c\u4f7f\u540e\u9762\u5143\u7d20\u4e0d\u53ef\u89c1\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>backface-visibility:hidden;<\/pre>\n<\/div>\n<h3 style=\"color:both;\">\u5341\u3001\u5b9e\u9645\u5e94\u7528-\u56fe\u7247\u7684\u65cb\u8f6c\u6728\u9a6c\u6548\u679c<\/h3>\n<p>\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a class=\"a_link\" target=\"_blank\" href=\"http:\/\/www.zhangxinxu.com\/study\/201209\/pictures-3d-slide-view.html\">\u56fe\u7247\u7684\u65cb\u8f6c\u6728\u9a6c\u6548\u679cdemo<\/a><\/p>\n<p>\u5efa\u8bae\u5728\u8db3\u591f\u65b0\u7248\u672c\u7684FireFox\u6d4f\u89c8\u5668\u6216Safari\u6d4f\u89c8\u5668\u4e0b\u89c2\u770b\uff0cChrome\u53ef\u80fd\u9700\u8981\u5c45\u4e2d\u5b9a\u4f4d\u67e5\u770b\uff0c\u4e0b\u56fe\u4e3a\u6548\u679c\u7f29\u7565\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201801\/2018-01-02_112734.jpg\" width=\"452\" height=\"163\" alt=\"\u56fe\u72473D\u65cb\u8f6c\u6728\u9a6c\u6548\u679c\u622a\u56fe\" class=\"alignnone\" \/><\/p>\n<p><strong>\u539f\u7406\uff1a<\/strong><br \/>\n\u90a3\u4e9b\u770b\u4e0a\u53bb\u5f88\u9177\u9177\u7684CSS3 3D\u6548\u679c\u5176\u5b9e\u5c31\u98a0\u6765\u5012\u53bb\u90a3\u51e0\u4e2a\u5c5e\u6027\uff08\u672c\u6587\u63d0\u5230\u7684\u8fd9\u51e0\u4e2a\uff09\uff0c\u6298\u817e\u6765\u6298\u817e\u53bb\uff0c\u8fd9\u91cc\u8fd9\u4e2a\u6548\u679c\u663e\u7136\u4e5f\u662f\u5982\u6b64\u3002<\/p>\n<p>\u9996\u5148HTML\u7ed3\u6784\uff0c\u5982\u4e0b\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>\u821e\u53f0\r\n    \u5bb9\u5668\r\n        \u56fe\u7247\r\n        \u56fe\u7247\r\n        \u56fe\u7247\r\n        ...<\/pre>\n<\/div>\n<p>\u5bf9\u4e8e\u821e\u53f0\uff0c\u5f88\u7b80\u5355\uff0c\u52a0\u4e2a\u89c6\u8ddd\uff0c\u6bd4\u65b9\u8bf4800\u50cf\u7d20\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre> perspective: 800px;<\/pre>\n<\/div>\n<p>\u5bf9\u4e8e\u5bb9\u5668\uff0c\u5f88\u7b80\u5355\uff0c\u52a0\u4e2a3D\u89c6\u56fe\u58f0\u660e\uff0c\u5982\u4e0b\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>transform-style: preserve-3d;<\/pre>\n<\/div>\n<p>\u7136\u540e\u5c31\u662f\u56fe\u7247\u4eec\u4e86\u3002\u4e3a\u4e86\u4e0d\u81f3\u4e8e\u4ea7\u751f\u7c7b\u4f3cDNA\u7684\u87ba\u65cb\u72b6\u6548\u679c\uff0c\u6211\u4eec\u8ba9\u6240\u6709\u56fe\u7247<code>position:absolute<\/code>\uff0c\u516c\u7528\u540c\u4e00\u4e2a\u4e2d\u5fc3\u70b9\u3002<\/p>\n<p>\u663e\u7136\uff0c\u56fe\u7247\u65cb\u8f6c\u6728\u9a6c\u662f\u7c7b\u4f3c\u94a2\u7ba1\u821e\u65cb\u8f6c\u7684\u8fd0\u52a8\uff0c\u56e0\u6b64\uff0c\u6211\u4eec\u5173\u5fc3\u7684\u662f<code>rotateY<\/code>\u7684\u5927\u5c0f\u3002<\/p>\n<p>\u56e0\u4e3a\u8981\u6b63\u597d\u7ed5\u6210\u4e00\u4e2a\u5708\uff0c\u56e0\u6b64\uff0c\u56fe\u7247<code>rotateY<\/code>\u503c\u6b63\u597d0~360\u7b49\u5206\uff0c\u4e8e\u662f\uff0c\u5982\u679c\u67099\u5f20\u56fe\u7247\uff0c\u5219\u6bcf\u4e2a\u56fe\u7247\u7684\u65cb\u8f6c\u89d2\u5ea6\u7d2f\u52a040(360 \/ 9 = 40)\u5ea6\u5373\u53ef\u3002\u56e0\u6b64\u6709\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>img:nth-child(1) { transform: rotateY(   0deg ); }\r\nimg:nth-child(2) { transform: rotateY(  40deg ); }\r\nimg:nth-child(3) { transform: rotateY(  80deg ); }\r\nimg:nth-child(4) { transform: rotateY( 120deg ); }\r\nimg:nth-child(5) { transform: rotateY( 160deg ); }\r\nimg:nth-child(6) { transform: rotateY( 200deg ); }\r\nimg:nth-child(7) { transform: rotateY( 240deg ); }\r\nimg:nth-child(8) { transform: rotateY( 280deg ); }\r\nimg:nth-child(9) { transform: rotateY( 320deg ); }<\/pre>\n<\/div>\n<p>\u8fd9\u6837\u5c31\u597d\u4e86\u5417\uff1f<\/p>\n<p>No, No, No!!!<\/p>\n<p>\u60f3\u60f3\u770b\u90a3\uff0c\u867d\u71369\u4e2a\u7edd\u8272\u7f8e\u5973\u6bcf\u4e2a\u4eba\u7684\u65b9\u4f4d\u4e0d\u4e00\u6837\uff0c\u4f46\u90fd\u7ad9\u5728\u540c\u4e00\u4e2a\u70b9\u4e0a\uff0c\u65e9\u5c31\u6324\u4f5c\u4e00\u56e2\uff0c\u663e\u7136\u662f\u4e0d\u884c\u7684\uff08\u89c1\u4e0b\u56fe\u53ea\u8bbe\u7f6erotateY\uff09\uff01\u6211\u4eec\u9700\u8981\u62c9\u5f00\u7a7a\u95f4~~<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201801\/2018-01-02_113143.png\" width=\"279\" height=\"191\" alt=\"\u53ea\u8bbe\u7f6erotateY\u65f6\u5019\uff0c\u4f17\u591a\u7f8e\u5973\u56fe\u7247\u6324\u4f5c\u4e00\u56e2\" class=\"alignnone\" \/><\/p>\n<p>\u5982\u4f55\u62c9\u5f00\u7a7a\u95f4\uff0c\u5f88\u7b80\u5355\u3002<\/p>\n<p>\u60f3\u60f3\u770b\u90a3\uff1a9\u4e2a\u7f8e\u5973\uff0c\u5206\u522b\u9762\u671d\u4e1c\u5357\u897f\u5317\u51719\u4e2a\u4e0d\u540c\u65b9\u4f4d\uff0c\u5979\u4eec\u53ea\u8981\u6bcf\u4e2a\u4eba\u5411\u524d\u8d70\u4e2a4~5\u6b65\uff0c\u7f8e\u5973\u4eec\u4e4b\u95f4\u7684\u7a7a\u95f4\u4e0d\u4e45\u62c9\u5f00\u4e86\uff0c\u5448\u73b0\u5706\u5f62\u4e86\uff01\u60f3\u8c61\u4e00\u4e0b\u591c\u7a7a\u4e2d\uff0c\u793c\u82b1\u7efd\u5f00\u7684\u573a\u666f~~<\/p>\n<p>\u8fd9\u91cc\u7684\u5411\u524d\u8d704~5\u6b65\uff0c\u806a\u660e\u7684\u4eba\u5e94\u8be5\u5df2\u7ecf\u77e5\u9053\u4e86\uff0c\u5c31\u662f\u672c\u6587\u63d0\u5230\u7684<code>translateZ<\/code>, \u5f53<code>translateZ<\/code>\u4e3a\u6b63\u503c\u7684\u65f6\u5019\uff0c\u5143\u7d20\u4f1a\u5411\u5176\u9762\u5bf9\u7684\u65b9\u5411\u8d70\u53bb\uff1b\u5982\u679c\u5143\u7d20\u65e0\u65cb\u8f6c\uff0c\u5c31\u4f1a\u671d\u663e\u793a\u5668\u8d70\u6765\uff01\uff01<\/p>\n<p>\u73b0\u5728\u53ea\u5269\u4e0b\u4e00\u4e2a\u95ee\u9898\u4e86\uff0c\u7f8e\u5973\u4eec\u8981\u5411\u524d\u8d70\u591a\u8fdc\u5462\uff1f\uff1f<\/p>\n<p>\u8fd9\u4e2a\u8ddd\u79bb\u662f\u6709\u8ba1\u7b97\u516c\u5f0f\u6ef4\uff01<\/p>\n<p>\u62ff\u672cdemo\u8ddd\u79bb\uff0c\u6bcf\u5f20\u7f8e\u5973\u56fe\u7247\u7684\u5bbd\u5ea6\u662f128\u50cf\u7d20\uff0c\u56e0\u6b64\uff0c\u6709\u5982\u4e0b\u7406\u60f3\u65b9\u4f4d\u6548\u679c\u56fe\uff1a<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u65cb\u8f6c\u6728\u9a6c\u6548\u679c\u7406\u60f3\u65b9\u4f4d\u56fe \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/diagram.png\" title=\"\u65cb\u8f6c\u6728\u9a6c\u6548\u679c\u7406\u60f3\u65b9\u4f4d\u56fe\" class=\"alignnone\" width=\"540\" height=\"402\" \/><\/p>\n<p>\u4e0a\u56fe\u4e2d\u7ea2\u8272\u6807\u6ce8\u7684<code>r<\/code>\u5c31\u662f\u7684demo\u9875\u9762\u4e2d\u56fe\u7247\u8981<code>translateZ<\/code>\u7684\u7406\u60f3\u503c\uff08\u8be5\u503c\u53ef\u4ee5\u8ba9\u6240\u6709\u56fe\u7247\u65e0\u7f1d\u56f4\u6210\u4e00\u4e2a\u5706\uff09\uff01<\/p>\n<p><code>r<\/code>\u7684\u8ba1\u7b97\u5f88\u7b80\u5355\uff0c\u6709\u521d\u4e2d\u6570\u5b66\u6c34\u5e73\u7684\u4eba\u5e94\u8be5\u90fd\u4f1a\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>r = 64 \/ Math.tan(20 \/ 180 * Math.PI) \u2248 175.8<\/pre>\n<\/div>\n<p>demo\u9875\u9762\u4e3a\u4e86\u597d\u770b\uff0c\u56fe\u7247\u4e4b\u95f4\u7559\u4e86\u70b9\u95f4\u8ddd\uff0c\u4f7f\u7528\u7684<code>translateZ<\/code>\u7684\u503c\u4e3a<code>175.8 + 20 = 195.8<\/code>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\u65cb\u8f6c\u6728\u9a6cdemo\u9875\u9762translateZ\u503c\u5927\u5c0f\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201209\/2012-09-07_003832.png\" title=\"\u65cb\u8f6c\u6728\u9a6cdemo\u9875\u9762translateZ\u503c\u5927\u5c0f\" class=\"alignnone\" width=\"407\" height=\"173\" \/><\/p>\n<p>\u6700\u540e\u7684\u6700\u540e\uff0c\u8981\u8ba9\u6728\u9a6c\u65cb\u8f6c\u8d77\u6765\uff0c\u53ea\u8981\u8ba9\u5bb9\u5668\u6bcf\u6b21\u65cb\u8f6c40\u5ea6\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n<p>\u8282\u7701\u7bc7\u5e45\uff0c\u5177\u4f53\u7684JavaScript\u64cd\u4f5c\u4ee3\u7801\u5c31\u4e0d\u5c55\u793a\u4e86\uff0c\u60a8\u6709\u5174\u8da3\u53ef\u4ee5\u67e5\u770bdemo\u9875\u9762\u6e90\u4ee3\u7801\u3002<\/p>\n<p>\u7406\u89e3\u4e86\u65cb\u8f6c\u6728\u9a6c3D\u6548\u679c\u5b9e\u73b0\u539f\u7406\uff0c\u57fa\u672c\u4e0a\uff0c\u5176\u4ed6\u4e9b3D\u6548\u679c\u53ef\u4ee5\u8f7b\u677e\u9a7e\u9a6d\u4e86\uff0c\u56e0\u6b64\uff0c\u672c\u6548\u679c\u8fd8\u662f\u503c\u5f97\u4f60\u82b1\u529f\u592b\u770b\u770b\u6ef4~~<\/p>\n<p><strong>\u8865\u5145\u4e8e2018-07-10<\/strong><br \/>\n\u65b0\u589e3D\u52a8\u753b\u6848\u4f8b\uff0c\u5b9e\u73b02\u4e2a3D\u5f00\u95e8\u6548\u679c\uff0c\u6709\u5b8c\u6210\u6e90\u4ee3\u7801\uff0c\u6709\u5174\u8da3\u53ef\u4ee5\u70b9\u51fb\u8fd9\u91cc\uff1a\u201c<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=7737\">CSS3\u5b9e\u73b03D\u5f00\u95e8\u52a8\u753b\u6548\u679c<\/a>\u201d\u3002<\/p>\n<h3>\u5341\u4e00\u3001\u597d\u5427\uff0c\u7ed3\u8bed<\/h3>\n<p>\u7406\u8bba\u4e0a\uff0c\u73b0\u5b9e\u4e16\u754c\uff0c\u53ca3\u6b21\u5143\u4e16\u754c\u4e2d\u7684\u5404\u79cd\u6709\u89c4\u5f8b\u7684\u8fd0\u52a8\u6548\u679c\u90fd\u53ef\u4ee5\u4f7f\u7528CSS3 transform 3D\u65b9\u6cd5\u5b9e\u73b0\u3002\u6587\u7ae0\u6700\u540e\u7684\u65cb\u8f6c\u6728\u9a6c\u6548\u679c\u53ef\u4ee5\u8bf4\u662f\u5404\u7c7b\u5343\u5947\u767e\u602a\u6548\u679c\u4e2d\u7684\u6ca7\u6d77\u4e00\u7c9f~~\u5176\u4ed6\u5404\u7c7b\u6709\u7684\u6ca1\u6709\u7684\u6548\u679c\u5c31\u9760\u4f60\u7684\u5927\u8111\u5c31\u6784\u60f3\u4e86\u3002\u81f3\u4e8e\u5b9e\u73b0\u561b\uff0c\u7406\u89e3\u4e86\uff0c\u4e5f\u5c31\u90fd\u662f\u5c0f\u83dc\u3002\u4f46\u662f\uff0c\u8981\u662f\u4e0d\u7406\u89e3\uff0c\u7eaf\u7cb9\u4ece\u7f51\u4e0acopy\u4e9b\u6548\u679c\u4ee3\u7801\uff0c\u90a3\u6c38\u8fdc\u5c31\u662fcopy\u7684\u547d\u54af\uff01<\/p>\n<p>\u6587\u7ae0\u7bc7\u5e45\u5df2\u7ecf\u5f88\u957f\u4e86\uff0c\u6211\u7684\u6307\u5934\u4e5f\u6572\u51fa\u8001\u8327\u6765\u4e86\uff0c\u5c31\u4e0d\u518d\u5570\u55e6\u4ec0\u4e48\u4e86\u3002\u5e0c\u671b\u672c\u6587\u7684\u55d1\u53e8\u3001\u5356\u5f04\u3001\u6298\u817e\u80fd\u591f\u8ba9\u60a8\u5b66\u4e60CSS3 3D transform\u53d8\u6362\u7684\u76f8\u5173\u4e1c\u897f\u66f4\u52a0\u8f7b\u677e\u70b9\uff01<\/p>\n<p>\u884c\u6587\u4ed3\u4fc3\uff0c\u6587\u4e2d\u6709\u9519\u8bef\u5728\u6240\u96be\u514d\uff0c\u6b22\u8fce\u8bf8\u4f4d\u6307\u6b63\u3002<\/p>\n<link rel=\"stylesheet\" href=\"\/study\/201612\/offer100.css?\">\n<style>.entry .o100[target]:after{display:none;position:absolute;visibility:hidden;}<\/style>\n<div class=\"o100\"><span class=\"thk100\"><\/span><\/div>\n<div><a href=\"https:\/\/100offer.com\/?utm_source=zhangxinxu&#038;utm_medium=display&#038;utm_campaign=zhangxinxu_blog&#038;campaign_code=zhangxinxu\" class=\"o100\" target=\"_blank\" onClick=\"window._gaq &#038;&#038; _gaq.push(['_trackEvent', '100', 'offer', 'from 3D']);\"><\/p>\n<div class=\"o100-div\"><span>100offer.com<\/span><\/div>\n<div class=\"o100-img\"><\/div>\n<p><\/a><\/div>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=2592\">http:\/\/www.zhangxinxu.com\/wordpress\/?p=2592<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=2592\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/image.zhangxinxu.com\/image\/blog\/201209\/3d-bg-article.jpg\" height=\"170\" width=\"550\" title=\"\u70b9\u51fb\u67e5\u770b\u672c\u6587\" alt=\"\u8f7b\u677e\u9a7e\u9a6dCSS3 3D transform\u53d8\u6362\" class=\"imgpad mb10\" \/><\/a><br \/>\nCSS3 3D transform\u53d8\u6362\u5bf9\u4e8e\u6ca1\u6709\u63a5\u89e6\u8fc7\u7684\u4eba\u800c\u8a00\u53ef\u80fd\u4f1a\u662f\u4ef6\u5f88\u5934\u75bc\u7684\u4e8b\u60c5\u3002\u9996\u5148\u6d89\u53ca\u5230N\u591aCSS\u65b9\u6cd5\u4ee5\u53caCSS\u51fd\u6570\uff0c\u5982\u4f55\u7406\u89e3\u4ed6\u4eec\u5934\u75bc\uff1b\u5176\u6b21\uff0c3D\u6548\u679c\u7684\u5b9e\u73b0\uff0c\u9700\u8981\u4e00\u5b9a\u7684\u7a7a\u95f4\u60f3\u8c61\u80fd\u529b\uff0c\u4f46\u662f\uff0c\u4e0d\u5c11\u4eba\u7684\u8111\u888b\u662f\u4f1a\u60f3\u59b9\u5b50\u60f3\u7537\u4eba\uff0c\u600e\u4e48\u529e\uff1f\u518d\u8005\uff0c3D\u6548\u679c\u7684\u5b9e\u73b0\u8fd8\u79bb\u4e0d\u5f00\u5404\u79cd\u89d2\u5ea6\u65b9\u4f4d\u7684\u6570\u5b66\u8ba1\u7b97\uff0c\u8981\u662f\u52fe\u8d77\u4e86\u67d0\u4e9b\u4eba\u5b66\u751f\u65f6\u4ee3\u7684\u6570\u5b66\u68a6\u9b47\uff0c\u53c8\u53ef\u5982\u4f55\u662f\u597d\uff01<\/p>\n<p>\u76f8\u5f53\u4e0d\u5c11\u4eba\u6709\u8fd9\u6837\u7684\u5883\u9047\uff0c\u52a0\u4e0a\u81ea\u5df1\u6700\u8fd1\u4e5f\u5728\u5b66\u4e60CSS3 3D transform\u53d8\u6362\u7684\u76f8\u5173\u4e1c\u897f\u3002\u597d\u5427\uff0c\u6574\u7406\u4e00\u4e0b\uff0c\u7528\u901a\u4fd7\u6613\u61c2\u7684\u65b9\u5f0f\u8868\u8fbe\u4e0b\u6211\u5bf9CSS3 3D transform\u53d8\u6362\u7684\u4e00\u4e9b\u7406\u89e3\uff1b\u5206\u4eab\u77e5\u8bc6\u540c\u65f6\uff0c\u81ea\u5df1\u4e5f\u6574\u7406\u548c\u63d0\u9ad8\u4e86\u3002\u4e00\u4e3e\u4e24\u5f97\uff0c\u4f55\u4e50\u4e0d\u4e3a\u3002<\/p>\n<p>\u672c\u6587\u662f\u96be\u5f97\u7684\u957f\u7bc7\uff0c\u5f88\u591a\u7cbe\u5fc3\u6311\u9009\u5236\u4f5c\u7684\u914d\u56fe\uff0cN\u591a\u5e2e\u52a9\u7406\u89e3\u5236\u4f5c\u7528\u5fc3\u7684\u7684demo\u9875\u9762\uff0c\u8fd8\u6709\u5fc5\u8981\u7684\u6e90\u4ee3\u7801\u5c55\u793a\u7b49\u3002\u5e0c\u671b\u672c\u6587\u7684\u5185\u5bb9\u53ef\u4ee5\u8ba9\u60a8\u5b66\u4e60CSS3 3D transform\u53d8\u6362\u7684\u76f8\u5173\u77e5\u8bc6\u66f4\u52a0\u7684\u8f7b\u677e\uff01<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[303,399,71,748,177,746,287,747,288],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/2592"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=2592"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/2592\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=2592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=2592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=2592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}