{"id":313,"date":"2022-07-06T11:41:48","date_gmt":"2022-07-06T11:41:48","guid":{"rendered":"https:\/\/rizkiakmanda.com\/?p=313"},"modified":"2022-07-05T04:04:37","modified_gmt":"2022-07-05T04:04:37","slug":"css-2d-transforms-code-dan-cara-membuatnya","status":"publish","type":"post","link":"https:\/\/rizkiakmanda.com\/?p=313","title":{"rendered":"CSS 2D Transforms : Code dan cara membuatnya"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Css 2D transforms memungkinkan kita untuk memanipulasi visual sebuah elemen dengan memiringkan,memutar, atau menggalakkan. Di artikel ini akan dibahas transformasi 2D.Terdapat metode-metode untuk membuat transformasi 2D,metode itu sendiri terdiri dari:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">translate()<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">rotate()<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">scale()<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">scaleX()<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">scaleY()<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">skew()<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">skewX()<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">skewY()<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">matrix()<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Metode yang pertama yaitu translate(),dengan metode ini kita bisa memindahkan element dari posisinya,sesuai dengan parameter yang diberikan untuk sumbu X dan sumbu Y.Metode ini memiliki parameter berupa sumbu X dan Y,dan diikuti satuan bisa berupa px atau persen.Jadi penulisan metode translate adalah transform: translate(sumbuX(px\/%), sumbuY(px\/%));,contoh<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><div class=\"dm-code-snippet dark no-background  dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/span><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\nbackground-color: #fff;\r\nborder: 2px solid #000;\r\nwidth: 200px;\r\nheight: 200px;\r\npadding: 20px;\r\ntransform: translate(50px, 50px);\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\"><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div><\/span><\/p>\n<p><span style=\"font-weight: 400;\"><div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-markup\"><\/span><\/p>\n<pre class=\"dm-pre-admin-side\">&lt;div class=\"box\"&gt;\r\n&lt;p&gt;content box bergerak 50px ke kanan dan 50px kebawah&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p><span style=\"font-weight: 400;\"><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div><\/span><\/p>\n<p><span style=\"font-weight: 400;\"> <img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-316 alignnone\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform.png\" alt=\"\" width=\"429\" height=\"350\" srcset=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform.png 429w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform-300x245.png 300w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Element yang ditambahkan metode translate,akan bergerak sesuai value parameternya,seperti gambar diatas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Metode yang kedua adalah rotate(),dengan metode ini kita bisa memutar element searah jarum jam atau berlawanan dengan arah jarum jam,sesuai dengan value yang diberikan.Metode ini hanya menerima satuan deg(derajat).Jika value yang diberikan adalah bilangan positif maka,element akan diputar sesuai arah jarum jam.Sebaliknya jika value yang diberikan adalah bilangan negatif maka,element akan diputar berlawanan arah dengan jarum jam.Metode ini hanya menerima satuan deg.<\/span><\/p>\n<div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\ntransform: rotate(50deg);\r\n}\r\n<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-317 alignnone\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform2.png\" alt=\"\" width=\"387\" height=\"335\" srcset=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform2.png 387w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform2-300x260.png 300w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Element berputar sesuai arah jarum jam,karena value yang diberikan berupa angka positive.<\/span><\/p>\n<div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\ntransform: rotate(-50deg);\r\n}\r\n<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-318 alignnone\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform3.png\" alt=\"\" width=\"334\" height=\"333\" srcset=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform3.png 334w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform3-300x300.png 300w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform3-150x150.png 150w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Element berputar berlawanan dengan arah jarum jam,karena value yang diberikan berupa angka negative.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Metode yang ketiga adalah scale(),dengan menggunakan metode ini element akan diperbesar atau diperkecil.Sesuai dengan parameter yang diberi untuk width dan height.Cara menggunakan metode ini sangat simpel,1 untuk ukuran normal sedangkan angka lebih dari satu akan memperbesar element,sesuai angka yang dimasukan.Contoh jika memberi value 2 maka element akan diperbesar 2x dari ukuran aslinya,namun jika value yang diberikan dibawah 1 dan diatas 0,misal 0.5,maka element akan diperkecil setengah dari ukuran aslinya.<\/span><\/p>\n<div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\ntransform: scale(2, 1.5);\r\n}\r\n<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-319\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform4.png\" alt=\"\" width=\"424\" height=\"321\" srcset=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform4.png 424w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform4-300x227.png 300w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Element diperbesar 2x ukuran panjangnya, dan 1.5x ukuran tingginya dari ukuran aslinya,karena value yang diberikan adalah angka lebih dari 1.<\/span><\/p>\n<div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\ntransform: scale(0.5);\r\n}\r\n<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-320\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform6.png\" alt=\"\" width=\"258\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Element diperkecil setengah dari ukuran aslinya,baik ukuran panjang maupun ukuran tingginya,karena value yang diberikan adalah angka kurang dari 1,dan diatas 0.Valuenya juga bisa hanya diberi satu angka,yang dimana akan membuat element,diperbesar atau diperkecil dengan ukuran panjang,dan tinggi yang sama.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Terdapat juga metode scaleX() dan scaleY(),keduanya memiliki kegunaan yang sama dengan metode scale().Namun perbedaannya,adalah metode scaleX() hanya memperbesar atau memperkecil ukuran panjang.Sedangkan,metode scaleY() hanya memperbesar atau memperkecil ukuran tingginya saja.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Metode yang keempat adalah skew(),metode ini akan memiringkan element,di sepanjang sumbu X dan sumbu Y sesuai sudut yang diberikan.Metode ini hanya menerima satuan deg,sama seperti metode rotate.<\/span><\/p>\n<div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\ntransform: skew(10deg, 15deg);\r\n}\r\n<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-321\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform7.png\" alt=\"\" width=\"510\" height=\"270\" srcset=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform7.png 510w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform7-300x159.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Element dimiringkan 10 derajat sepanjang sumbu X, dan 15 derajat sepanjang sumbu Y.Jika parameter kedua tidak diisi,maka akan dianggap bervalue 0,atau normal.Lebih jelasnya bisa lihat contoh dibawah<\/span><\/p>\n<div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\ntransform: skew(10deg);\r\n}\r\n<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-322\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform78.png\" alt=\"\" width=\"477\" height=\"253\" srcset=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform78.png 477w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform78-300x159.png 300w\" sizes=\"auto, (max-width: 477px) 100vw, 477px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Bisa dilihat,jika parameter kedua tidak diisi makan hanya akan memiringkan element sepanjang sumbu X.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Terdapat dua metode skewX() dan skewY(),keduanya memiliki kegunaan yang sama dengan metode skew().Namun perbedaan kedua metode ini yaitu,kegunaannya yang lebih spesifik.Seperti skewX() berguna untuk memiringkan element sepanjang sumbu X saja.Sedangkan skewY() berguna untuk memiringkan element sepanjang sumbu Y saja.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Metode transform 2D yang terakhir adalah metode matrix(),metode ini menggabungkan semua metode transform 2D menjadi satu.Metode ini mengambil 6 parameter,yang berisi fungsi matematika.Yang memungkian untuk memutar(rotate()),menskala(scale()),memindahkan(translate()), dan memiringkan(skew()) sebuah element.Parameternya adalah sebagai berikut matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()).<\/span><\/p>\n<div class=\"dm-code-snippet dark no-background no-background-mobile dm-slim-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"no-wrap language-css\"><\/p>\n<pre class=\"dm-pre-admin-side\">.box {\r\ntransform: matrix(1.5, -0.5, 0, 1, 150, 50);\r\n}\r\n<\/pre>\n<p><\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-323\" src=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform8.png\" alt=\"\" width=\"512\" height=\"268\" srcset=\"https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform8.png 512w, https:\/\/rizkiakmanda.com\/wp-content\/uploads\/2022\/07\/css-2d-transform8-300x157.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Css 2D transforms memungkinkan kita untuk memanipulasi visual sebuah elemen dengan memiringkan,memutar, atau menggalakkan. Di artikel ini akan dibahas transformasi 2D.Terdapat metode-metode untuk membuat transformasi 2D,metode itu sendiri terdiri dari: translate() rotate() scale() scaleX() scaleY() skew() skewX() skewY() matrix() Metode yang pertama yaitu translate(),dengan metode ini kita bisa memindahkan element dari posisinya,sesuai dengan parameter yang [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":325,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[3,15],"tags":[],"class_list":["post-313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-tutorial","category-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=313"}],"version-history":[{"count":5,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":364,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/posts\/313\/revisions\/364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=\/wp\/v2\/media\/325"}],"wp:attachment":[{"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rizkiakmanda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}