{"id":1035,"date":"2021-06-12T21:04:18","date_gmt":"2021-06-12T12:04:18","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1035"},"modified":"2022-06-04T19:54:45","modified_gmt":"2022-06-04T10:54:45","slug":"tailwindcss%e3%83%81%e3%83%bc%e3%83%88%e3%82%b7%e3%83%bc%e3%83%88%e8%a7%a3%e8%aa%actransforms","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1035","title":{"rendered":"Tailwindcss\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8\u89e3\u8aac(Transforms)"},"content":{"rendered":"\n

Transform<\/h2>\n\n\n\n
class<\/th>properties<\/th><\/tr><\/thead>
transform<\/td>–tw-translate-x: 0; –tw-translate-y: 0; –tw-rotate: 0; –tw-skew-x: 0; –tw-skew-y: 0; –tw-scale-x: 1; –tw-scale-y: 1; transform: translateX(var(–tw-translate-x)) translateY(var(–tw-translate-y)) rotate(var(–tw-rotate)) skewX(var(–tw-skew-x)) skewY(var(–tw-skew-y)) scaleX(var(–tw-scale-x)) scaleY(var(–tw-scale-y));<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Transform Origin<\/h2>\n\n\n\n
class<\/th>properties<\/th><\/tr><\/thead>
origin-center<\/td>transform-origin: center;<\/td><\/tr>
origin-top<\/td>transform-origin: top;<\/td><\/tr>
origin-top-right<\/td>transform-origin: top right;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Scale<\/h2>\n\n\n\n

\u3053\u306e\u6a5f\u80fd\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u8981\u7d20\u3092\u81ea\u7531\u306b\u62e1\u5927\u30fb\u7e2e\u5c0f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059<\/strong><\/p>\n\n\n\n

class<\/th>properties<\/th><\/tr><\/thead>
scale-0<\/td>–tw-scale-x: 0; –tw-scale-y: 0;<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Rotate<\/h2>\n\n\n\n

rotate()\u306f\u3001\u8981\u7d20\u306e\u56de\u8ee2\u3092\u6307\u5b9a\u3059\u308btransform\u306e\u5024\u3067\u3059\u3002
\u89d2\u5ea6\u306a\u306e\u3067\u5358\u4f4d\u306fdeg\u3001\u82f1\u8a9e\u306eDegree\uff08\u89d2\u5ea6\uff09\u3092\u7565\u3057\u305f\u3082\u306e\u3067\u3059\u3002
\u30d7\u30e9\u30b9\u306e\u5024\u3067\u6642\u8a08\u56de\u308a\u3001\u30de\u30a4\u30ca\u30b9\u306e\u5024\u3067\u53cd\u6642\u8a08\u56de\u308a\u306b\u56de\u8ee2\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

rotate(\u56de\u8ee2\u89d2\u5ea6)<\/h3>\n\n\n\n

\u8981\u7d20\u306e\u771f\u3093\u4e2d\u3092\u57fa\u6e96\u306b2D\u56de\u8ee2\u3092\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

class<\/th>properties<\/th><\/tr><\/thead>
rotate-0<\/td>–tw-rotate: 0deg;<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

rotateX(\u56de\u8ee2\u89d2\u5ea6)<\/h3>\n\n\n\n

X\u8ef8\u3092\u8ef8\u3068\u3057\u3066\u56de\u8ee2\u3059\u308b\u6307\u5b9a\u3067\u3059<\/p>\n\n\n\n

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

rotateY(\u56de\u8ee2\u89d2\u5ea6)<\/h3>\n\n\n\n

Y\u8ef8\u3092\u8ef8\u3068\u3057\u3066\u56de\u8ee2\u3059\u308b\u6307\u5b9a\u3067\u3059\u3002\u3053\u3061\u3089\u306f\u5de6\u53f3\u306e\u771f\u3093\u4e2d\u304c\u8ef8\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

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

rotateZ(\u56de\u8ee2\u89d2\u5ea6)<\/h3>\n\n\n\n

rotateZ\u306e\u52d5\u304d\u306frotate\u3068\u5168\u304f\u540c\u3058\u3067\u3059\u3002<\/p>\n\n\n\n

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

Translate<\/h2>\n\n\n\n
class<\/th>properties<\/th><\/tr><\/thead>
translate-x-0<\/td>–tw-translate-x: 0px;<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Skew<\/h2>\n\n\n\n
class<\/th>properties<\/th><\/tr><\/thead>
skew-x-0<\/td>–tw-skew-x: 0deg;<\/td><\/tr>
skew-x-1<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

Transform class properties transform #8211;tw-translate-x: 0; #8211;tw-translate-y: 0; #8211;tw-rotate: 0; <\/p>\n","protected":false},"author":1,"featured_media":1061,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-1035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tailwindcss"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1035"}],"version-history":[{"count":4,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1035\/revisions"}],"predecessor-version":[{"id":1963,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1035\/revisions\/1963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/1061"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}