{"id":1352,"date":"2019-09-27T17:31:50","date_gmt":"2019-09-27T09:31:50","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1352"},"modified":"2021-10-23T21:14:03","modified_gmt":"2021-10-23T13:14:03","slug":"css-transforms","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/27\/css-transforms\/","title":{"rendered":"CSS Transforms \u65cb\u8f49"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\ntransform: translate(120px, 50%);\ntransform: rotate(0.5turn);\ntransform: scale(2, 0.5);\ntransform: skew(30deg, 20deg);\ntransform: matrix(1, 2, 3, 4, 5, 6);\n\ntransform: scale(0.5) translate(-100%, -100%);\n\n\/* Keyword values *\/\ntransform: none;\n\n\/* Function values *\/\ntransform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);\ntransform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\ntransform: perspective(17px);\ntransform: rotate(0.5turn);\ntransform: rotate3d(1, 2.0, 3.0, 10deg);\ntransform: rotateX(10deg);\ntransform: rotateY(10deg);\ntransform: rotateZ(10deg);\ntransform: translate(12px, 50%);\ntransform: translate3d(12px, 50%, 3em);\ntransform: translateX(2em);\ntransform: translateY(3in);\ntransform: translateZ(2px);\ntransform: scale(2, 0.5);\ntransform: scale3d(2.5, 1.2, 0.3);\ntransform: scaleX(2);\ntransform: scaleY(0.5);\ntransform: scaleZ(0.3);\ntransform: skew(30deg, 20deg);\ntransform: skewX(30deg);\ntransform: skewY(1.07rad);\n\n\/* Multiple function values *\/\ntransform: translateX(10px) rotate(10deg) translateY(5px);\ntransform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);\n\n\/* Global values *\/\ntransform: inherit; \/* \u7e7c\u627f *\/\ntransform: initial;  \/* \u521d\u59cb *\/\ntransform: unset; \/* \u672a\u8a2d\u7f6e *\/<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2D Transforms \u5c6c\u6027<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\u4f4d\u79fb<\/strong><\/td><td>translate()<\/td><td>\u4f4d\u79fb <\/td><\/tr><tr><td><\/td><td>rotate()<\/td><td>\u65cb\u8f49 <\/td><\/tr><tr><td><strong>\u7e2e\u653e<\/strong><\/td><td>scale()<\/td><td>\u7e2e\u653e<\/td><\/tr><tr><td><\/td><td>scaleX()<\/td><td>X\u6a6b\u5411\u7e2e\u653e<\/td><\/tr><tr><td><\/td><td>scaleY()<\/td><td>X\u5782\u76f4\u7e2e\u653e<\/td><\/tr><tr><td><strong>\u50be\u659c<\/strong><\/td><td>skew()<\/td><td>\u50be\u659c<\/td><\/tr><tr><td><\/td><td>skewX()<\/td><td>X\u8ef8\u50be\u659c<\/td><\/tr><tr><td><\/td><td>skewY()<\/td><td>Y\u8ef8\u50be\u659c<\/td><\/tr><tr><td><strong>\u77e9\u9663<\/strong><\/td><td>matrix()<\/td><td>\u8a2d\u5b9a6\u7a2e\u8b8a\u5f62\u51fd\u5f0f  matrix(n,n,n,n,n,n)<\/td><\/tr><tr><td><strong>\u539f\u9ede<\/strong><\/td><td>transform-origin(x,y)<\/td><td>X\u8207Y\u8a2d\u5b9a\u539f\u9ede\u4f4d\u7f6e<br>(top\u3001center\u3001bottom\u3001left\u3001right)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2D Transforms \u7bc4\u4f8b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">translate \u4f4d\u79fb<\/h3>\n\n\n\n<p>\u55ae\u4f4d px\u3001em\u3001in\u3001%\uff0c\u6578\u503c()\u53f3\u4e0b\uff0c\u6578\u503c(-)\u5de6\u4e0a<br><br>translate(x,y)<br>translateX(n)<br>translateY(n)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: translate(50px,100px); \/* IE 9 *\/\n  -webkit-transform: translate(50px,100px); \/* Safari prior 9.0 *\/\n  transform: translate(50px,100px); \/* Standard syntax *\/\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">rotate  \u65cb\u8f49<\/h3>\n\n\n\n<p>\u65cb\u8f49\u9806\u6642\u91dd(deg)\u8207\u9006\u6642\u91dd(-deg)<br>rotate(angle)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u9806\u6642\u91dd*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: rotate(20deg); \/* IE 9 *\/\n  -webkit-transform: rotate(20deg); \/* Safari prior 9.0 *\/\n  transform: rotate(20deg); \/* Standard syntax *\/\n}\n\n\/*\u9006\u6642\u91dd*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: rotate(-20deg); \/* IE 9 *\/\n  -webkit-transform: rotate(-20deg); \/* Safari prior 9.0 *\/\n  transform: rotate(-20deg); \/* Standard syntax *\/\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">scale \u7e2e\u653e<\/h3>\n\n\n\n<p>\u6578\u503c1\u6b63\u5e38\u6bd4\u4f8b\uff0c>1\u653e\u5927\uff0c&lt;1\u7e2e\u5c0f\u3002<br>scale(x,y)<br>scaleX(n)<br>scaleY(n)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*scale()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: scale(2,3); \/* IE 9 *\/\n  -webkit-transform: scale(2,3); \/* Safari prior 9.0 *\/\n  transform: scale(2,3); \/* Standard syntax *\/\n}\n\n\/*scaleX()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: scaleX(2); \/* IE 9 *\/\n  -webkit-transform: scaleX(2); \/* Safari prior 9.0 *\/\n  transform: scaleX(2); \/* Standard syntax *\/\n}\n\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: scaleX(0.5); \/* IE 9 *\/\n  -webkit-transform: scaleX(0.5); \/* Safari prior 9.0 *\/\n  transform: scaleX(0.5); \/* Standard syntax *\/\n}\n\n\/*scaleY()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: scaleY(3); \/* IE 9 *\/\n  -webkit-transform: scaleY(3); \/* Safari prior 9.0 *\/\n  transform: scaleY(3); \/* Standard syntax *\/\n}\n\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: scaleY(0.5); \/* IE 9 *\/\n  -webkit-transform: scaleY(0.5); \/* Safari prior 9.0 *\/\n  transform: scaleY(0.5); \/* Standard syntax *\/\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">skew \u50be\u659c<\/h3>\n\n\n\n<p>X\u6a6b\u5411\u50be\u659c\uff0c\u6578\u503cX()\u5411\u5de6\uff0c\u6578\u503cX(-)\u5411\u53f3<br>Y\u5782\u76f4\u50be\u659c\uff0c\u6578\u503cY()\u5411\u4e0b\uff0c\u6578\u503cY(-)\u5411\u4e0a<br><br>skew(x-angle,y-angle)<br>skewX(angle)<br>skewY(angle)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*skew()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: skew(20deg,10deg); \/* IE 9 *\/\n  -webkit-transform: skew(20deg,10deg); \/* Safari prior 9.0 *\/\n  transform: skew(20deg,10deg); \/* Standard syntax *\/\n}\n\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: skew(20deg); \/* IE 9 *\/\n  -webkit-transform: skew(20deg); \/* Safari prior 9.0 *\/\n  transform: skew(20deg); \/* Standard syntax *\/\n}\n\n\/*scaleX()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: skewX(30deg); \/* IE 9 *\/\n  -webkit-transform: skewX(30deg); \/* Safari prior 9.0 *\/\n  transform: skewX(30deg); \/* Standard syntax *\/\n}\n\n\/*scaleY()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: skewY(20deg); \/* IE 9 *\/\n  -webkit-transform: skewY(20deg); \/* Safari prior 9.0 *\/\n  transform: skewY(20deg); \/* Standard syntax *\/\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>matrix<\/strong>  \u77e9\u9663<\/h3>\n\n\n\n<p>\u8a2d\u5b9a6\u7a2e\u8b8a\u5f62\u51fd\u5f0f<br>matrix (scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); \/* IE 9 *\/\n  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); \/* Safari prior 9.0 *\/\n  transform: matrix(1, -0.3, 0, 1, 0, 0); \/* Standard syntax *\/\n}\n\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); \/* IE 9 *\/\n  -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); \/* Safari prior 9.0 *\/\n  transform: matrix(1, 0, 0.5, 1, 150, 0); \/* Standard syntax *\/\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">transform-origin \u8b8a\u5f62\u539f\u9ede<\/h3>\n\n\n\n<p>\u8b8a\u5f62\u539f\u9ede\uff0cX\u8207Y\u8a2d\u5b9a\u539f\u9ede\u4f4d\u7f6e(x,y) = top\u3001center\u3001bottom\u3001left\u3001right<br>top\/center\/bottom (top = 0%, bottom=100%)<br>left\/center\/right (left = 0%, right = 100%)<br><br>\u53ef\u8207\u5176\u4ed6\u5c6c\u6027\u914d\u5408\uff0c\u7d44\u5408\u8a9e\u6cd5<br>transform: rotate(45deg) translateX(200px);<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u4ee5\u5de6\u4e0a\u539f\u9ede\u70ba\u4e2d\u5fc3\u65cb\u8f49*\/\n.box1 {\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n  transform-origin: left top;\n  transition: 1s ease-in-out;\n}\n\n.box1:hover {\n  transform: rotate(-270deg);\n}\n\n\/*\u4ee5\u53f3\u4e0b\u539f\u9ede\u70ba\u4e2d\u5fc3\u7e2e\u653e*\/\n.box2{\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n  transform-origin: bottom right;\n  transition: 1s ease-in-out;\n}\n\n.box2:hover {\n  transform: scale(2);\n}\n\n\/*\u4ee5\u53f3\u4e0a\u539f\u9ede\u70ba\u4e2d\u5fc3\u6301\u7e8c\u65cb\u8f49*\/\n.box3 {\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n  transform-origin: 20px 30px;\n  transition: 1s ease-in-out;\n}\n\n.box3:hover {\n  transform: rotate(900deg);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3D Transforms \u5c6c\u6027<\/h2>\n\n\n\n<p>\u8207 2D Transforms \u5c6c\u6027\u5dee\u4e0d\u591a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \u53c3\u6578\u4f7f\u7528\u65b9\u5f0f *\/\n\/*rotateX()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -webkit-transform: rotateX(150deg); \/* Safari prior 9.0 *\/\n  transform: rotateX(150deg); \/* Standard syntax *\/\n}\n\n\/*rotateY()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -webkit-transform: rotateY(150deg); \/* Safari prior 9.0 *\/\n  transform: rotateY(150deg); \/* Standard syntax *\/\n}\n\n\/*rotateZ()*\/\ndiv {\n  width: 300px;\n  height: 100px;\n  background-color: yellow;\n  border: 1px solid black;\n  -webkit-transform: rotateZ(90deg); \/* Safari prior 9.0 *\/\n  transform: rotateZ(90deg); \/* Standard syntax *\/\n}<\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\u4f4d\u79fb<\/strong><\/td><td>translate3d(x,y,z)<\/td><\/tr><tr><td><\/td><td>translateX(x)<\/td><\/tr><tr><td><\/td><td>translateY(y)<\/td><\/tr><tr><td><\/td><td>translateZ(z)<\/td><\/tr><tr><td><strong>\u65cb\u8f49<\/strong><\/td><td>rotate3d(x,y,z,angle)<\/td><\/tr><tr><td><\/td><td>rotateX()<\/td><\/tr><tr><td><\/td><td>rotateY()<\/td><\/tr><tr><td><\/td><td>rotateZ()<\/td><\/tr><tr><td><strong>\u7e2e\u653e<\/strong><\/td><td>scale3d(x,y,z)<\/td><\/tr><tr><td><\/td><td>scaleX(x)<\/td><\/tr><tr><td><\/td><td>scaleY(y)<\/td><\/tr><tr><td><\/td><td>scaleZ(z)<\/td><\/tr><tr><td><strong>\u77e9\u9663<\/strong><\/td><td>matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)<\/td><\/tr><tr><td><strong>\u900f\u8996<\/strong><\/td><td>perspective(px)<\/td><\/tr><tr><td><\/td><td>perspective-origin(x,y)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3D Transforms \u7bc4\u4f8b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">perspective \u900f\u8996<\/h3>\n\n\n\n<p>2\u7a2e\u5b9a\u7fa9\u65b9\u5f0f : <br>perspective: 500px;<br>transform: perspective(250px);<br><br>\u53ef\u8207\u5176\u4ed6\u5c6c\u6027\u914d\u5408\uff0c\u7d44\u5408\u8a9e\u6cd5<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\u900f\u8996+\u4f4d\u79fb*\/\n.box1 {\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n \n  transform: perspective(250px)  translateZ(-50px);\n}\n\n.box2{\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n  \n  transform: perspective(250px)  translateZ(50px);\n}\n\n\/*\u900f\u8996+\u65cb\u8f49*\/\n.box1 {\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n  \n  transform: perspective(250px) rotateX(45deg);\n}\n\n.box2{\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n  \n transform: perspective(250px) rotateY(45deg);\n}\n\n.box3 {\n  background: #2db34a;\n  border-radius: 6px;\n  height: 95px;\n  width: 95px;\n  line-height: 95px;\n  text-align: center;\n  color: white;\n  font-size: 11px;\n  \n  transform: perspective(250px) rotateZ(45deg);\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">perspective-origin \u900f\u8996\u539f\u9ede<\/h2>\n\n\n\n<p>\u900f\u8996\u539f\u9ede\u6216\u6d88\u5931\u9ede(vanishing point)\uff0cX\u8207Y\u8207Z\u8a2d\u5b9a\u539f\u9ede\u4f4d\u7f6e(x,y,z) = top\u3001center\u3001bottom\u3001left\u3001right<br><br>perspective-origin \uff0b perspective = perspective matrix \u900f\u8996\u77e9\u9663<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--html\u7bc4\u4f8b - cube\u5efa\u69cb-->\n&lt;div class=\"scene\">\n  &lt;div  class=\"cube\">\n    &lt;div class=\"front\">\u524d&lt;\/div>\n    &lt;div class=\"back\">\u5f8c&lt;\/div>\n    &lt;div class=\"top\">\u4e0a&lt;\/div>\n    &lt;div class=\"bottom\">\u4e0b&lt;\/div>\n    &lt;div class=\"left\">\u5de6&lt;\/div>\n    &lt;div class=\"right\">\u53f3&lt;\/div>\n  &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*css\u7bc4\u4f8b - cube\u4e2d\u5fc3\u9ede(50%)\u8207\u5411\u4e0a\u504f\u79fb150px + Y\u8ef8\u65cb\u8f49\u52d5\u756b*\/\n@keyframes cube-rotate {\n  0% {\n    transform: rotateY(0);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n.scene {\n  width: 200px;\n  height: 200px;\n  margin: 50px 0 0 50px;\n  \n  perspective: 1000px;\n  perspective-origin: 50% -150px;\n}\n\n.cube {\n  transform-style: preserve-3d;\n  animation: cube-rotate 10s infinite ease;\n}\n\n.cube div {\n  display: block;\n  position: absolute;\n  width: 200px;\n  height: 200px;\n  line-height: 200px;\n  font-size: 40px;\n  color: white;\n  text-align: center;\n  backface-visibility: visible;\n}\n\n.front {\n  background: rgba(0, 0, 0, 0.4);\n  transform: translateZ(100px);\n}\n\n.back {\n  background: rgba(0, 255, 0, 1);\n  transform: rotateY(180deg) translateZ(100px);\n}\n\n.top {\n  background: rgba(196, 0, 0, 0.7);\n  transform: rotateX(90deg) translateZ(100px);\n}\n\n.bottom {\n  background: rgba(196, 0, 196, 0.7);\n  transform: rotateX(-90deg) translateZ(100px);\n}\n\n.left {\n  background: rgba(0, 0, 196, 0.7);\n  transform: rotateY(-90deg) translateZ(100px);\n}\n\n.right {\n  background: rgba(196, 196, 0, 0.7);\n  transform: rotateY(90deg) translateZ(100px);\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>2D Transforms \u5c6c\u6027 \u4f4d\u79fb translate() \u4f4d\u79fb rotate() \u65cb\u8f49 \u7e2e\u653e scale&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-1352","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1352"}],"version-history":[{"count":120,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1352\/revisions"}],"predecessor-version":[{"id":2688,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1352\/revisions\/2688"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1352"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}