{"id":267,"date":"2023-08-19T12:07:17","date_gmt":"2023-08-19T04:07:17","guid":{"rendered":"https:\/\/www.qzdd.net\/?p=267"},"modified":"2023-08-19T12:07:17","modified_gmt":"2023-08-19T04:07:17","slug":"transform","status":"publish","type":"post","link":"https:\/\/www.qzdd.net\/?p=267","title":{"rendered":"Transform"},"content":{"rendered":"\n

CSS Transform\u5c5e\u6027\u7528\u4e8e\u53d8\u5f62\uff0c\u5c5e\u6027\u503c\u7531\u5185\u7f6e\u7684\u4e94\u5927\u51fd\u6570\u7ec4\u6210\uff08rotate\u65cb\u8f6c\u3001translate\u5e73\u79fb\u3001scale\u7f29\u653e\u3001skew\u503e\u659c\u548cmatrix\u77e9\u9635\uff09\u3002<\/p>\n\n\n\n

none<\/td>\u5b9a\u4e49\u4e0d\u8fdb\u884c\u8f6c\u6362\u3002<\/td><\/tr>
matrix(n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>)<\/td>\u5b9a\u4e49 2D \u8f6c\u6362\uff0c\u4f7f\u7528\u516d\u4e2a\u503c\u7684\u77e9\u9635\u3002<\/td><\/tr>
matrix3d(n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>,n<\/em>)<\/td>\u5b9a\u4e49 3D \u8f6c\u6362\uff0c\u4f7f\u7528 16 \u4e2a\u503c\u7684 4×4 \u77e9\u9635\u3002<\/td><\/tr>
translate(x<\/em>,y<\/em>)<\/td>\u5b9a\u4e49 2D \u8f6c\u6362\u3002<\/td><\/tr>
translate3d(x<\/em>,y<\/em>,z<\/em>)<\/td>\u5b9a\u4e49 3D \u8f6c\u6362\u3002<\/td><\/tr>
translateX(x<\/em>)<\/td>\u5b9a\u4e49\u8f6c\u6362\uff0c\u53ea\u662f\u7528 X \u8f74\u7684\u503c\u3002<\/td><\/tr>
translateY(y<\/em>)<\/td>\u5b9a\u4e49\u8f6c\u6362\uff0c\u53ea\u662f\u7528 Y \u8f74\u7684\u503c\u3002<\/td><\/tr>
translateZ(z<\/em>)<\/td>\u5b9a\u4e49 3D \u8f6c\u6362\uff0c\u53ea\u662f\u7528 Z \u8f74\u7684\u503c\u3002<\/td><\/tr>
scale(x<\/em>[,y<\/em>]?)<\/td>\u5b9a\u4e49 2D \u7f29\u653e\u8f6c\u6362\u3002<\/td><\/tr>
scale3d(x<\/em>,y<\/em>,z<\/em>)<\/td>\u5b9a\u4e49 3D \u7f29\u653e\u8f6c\u6362\u3002<\/td><\/tr>
scaleX(x<\/em>)<\/td>\u901a\u8fc7\u8bbe\u7f6e X \u8f74\u7684\u503c\u6765\u5b9a\u4e49\u7f29\u653e\u8f6c\u6362\u3002<\/td><\/tr>
scaleY(y<\/em>)<\/td>\u901a\u8fc7\u8bbe\u7f6e Y \u8f74\u7684\u503c\u6765\u5b9a\u4e49\u7f29\u653e\u8f6c\u6362\u3002<\/td><\/tr>
scaleZ(z<\/em>)<\/td>\u901a\u8fc7\u8bbe\u7f6e Z \u8f74\u7684\u503c\u6765\u5b9a\u4e49 3D \u7f29\u653e\u8f6c\u6362\u3002<\/td><\/tr>
rotate(angle<\/em>)<\/td>\u5b9a\u4e49 2D \u65cb\u8f6c\uff0c\u5728\u53c2\u6570\u4e2d\u89c4\u5b9a\u89d2\u5ea6\u3002<\/td><\/tr>
rotate3d(x<\/em>,y<\/em>,z<\/em>,angle<\/em>)<\/td>\u5b9a\u4e49 3D \u65cb\u8f6c\u3002<\/td><\/tr>
rotateX(angle<\/em>)<\/td>\u5b9a\u4e49\u6cbf\u7740 X \u8f74\u7684 3D \u65cb\u8f6c\u3002\uff08\u624b\u87ba\u65cb\u6cd5\u5219\uff0c\u5927\u62c7\u6307\u6307\u5411\u6b63\u8f74\u65b9\u5411\uff0c\u56db\u4e2a\u624b\u6307\u7684\u6307\u5411\u5373\u662f\u65cb\u8f6c\u6b63\u5411<\/em>\uff09<\/td><\/tr>
rotateY(angle<\/em>)<\/td>\u5b9a\u4e49\u6cbf\u7740 Y \u8f74\u7684 3D \u65cb\u8f6c\u3002\uff08\u624b\u87ba\u65cb\u6cd5\u5219\uff0c\u5927\u62c7\u6307\u6307\u5411\u6b63\u8f74\u65b9\u5411\uff0c\u56db\u4e2a\u624b\u6307\u7684\u6307\u5411\u5373\u662f\u65cb\u8f6c\u6b63\u5411<\/em>\uff09<\/td><\/tr>
rotateZ(angle<\/em>)<\/td>\u5b9a\u4e49\u6cbf\u7740 Z \u8f74\u7684 3D \u65cb\u8f6c\u3002\uff08\u624b\u87ba\u65cb\u6cd5\u5219\uff0c\u5927\u62c7\u6307\u6307\u5411\u6b63\u8f74\u65b9\u5411\uff0c\u56db\u4e2a\u624b\u6307\u7684\u6307\u5411\u5373\u662f\u65cb\u8f6c\u6b63\u5411<\/em>\uff09<\/td><\/tr>
skew(x-angle<\/em>,y-angle<\/em>)<\/td>\u5b9a\u4e49\u6cbf\u7740 X \u548c Y \u8f74\u7684 2D \u503e\u659c\u8f6c\u6362\u3002<\/td><\/tr>
skewX(angle<\/em>)<\/td>\u5b9a\u4e49\u6cbf\u7740 X \u8f74\u7684 2D \u503e\u659c\u8f6c\u6362\u3002\uff08\u53f3\u4e0b\u89d2\u6cbf\u8f74\u6b63\u5411\uff09\/ (X\u6b63\u89d2\u5ea6\u9006\u65f6\u9488\uff0cY\u6b63\u89d2\u5ea6\u987a\u65f6\u9488\uff09<\/td><\/tr>
skewY(angle<\/em>)<\/td>\u5b9a\u4e49\u6cbf\u7740 Y \u8f74\u7684 2D \u503e\u659c\u8f6c\u6362\u3002\uff08\u53f3\u4e0b\u89d2\u6cbf\u8f74\u6b63\u5411\uff09\/ (X\u6b63\u89d2\u5ea6\u9006\u65f6\u9488\uff0cY\u6b63\u89d2\u5ea6\u987a\u65f6\u9488\uff09<\/td><\/tr>
perspective(n<\/em>)<\/td>\u4e3a 3D \u8f6c\u6362\u5143\u7d20\u5b9a\u4e49\u900f\u89c6\u89c6\u56fe\uff08\u89c6\u89d2\uff09\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u5750\u6807\u7cfb<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n

\u56fe\u7247\u6765\u6e90<\/p>\n\u7b14\u540d\uff1a\u6765\u7897\u9e21\u86cb\u9762
\u7b80\u4e66\u4e3b\u9875\uff1ahttps:\/\/www.jianshu.com\/u\/4876275b5a73<\/a>
\u90ae\u7bb1\uff1ajob_tom@foxmail.com<\/a>
CSDN ID\uff1atom_wong666<\/cite><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

CSS Transform\u5c5e\u6027\u7528\u4e8e\u53d8\u5f62\uff0c\u5c5e\u6027\u503c\u7531\u5185\u7f6e\u7684\u4e94\u5927\u51fd\u6570\u7ec4\u6210\uff08rotate\u65cb\u8f6c\u3001translate\u5e73\u79fb\u3001 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[55,57,59,61,62],"class_list":["post-267","post","type-post","status-publish","format-standard","hentry","category-base","tag-rotate","tag-scale","tag-skew","tag-transform","tag-translate"],"_links":{"self":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=267"}],"version-history":[{"count":0,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/267\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}