{"id":19967,"date":"2014-05-06T13:01:04","date_gmt":"2014-05-06T05:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19967"},"modified":"2023-06-16T16:57:11","modified_gmt":"2023-06-16T08:57:11","slug":"css-3d-shape-tridiv","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/","title":{"rendered":"Create CSS 3D Shape EasilyUsing Tridiv"},"content":{"rendered":"<p>Have you ever worked with 3D on the web? If so, then you\u2019re probably familiar with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.khronos.org\/webgl\/\">WebGL<\/a> (Web Graphics Library), a JavaScript API intended for <strong>3D and 2D graphics rendering<\/strong> on your web browser without the use of plugins. In this post, we are introducing <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/tridiv.com\/\">Tridiv<\/a>, a free web app for <strong>creating CSS 3D shapes<\/strong> with ease.<\/p>\n<p>If you\u2019re familiar with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.blender.org\/\">Blender<\/a>, one of the most popular desktop 3D modelling applications, then <strong>Tridiv<\/strong> is the application for the web. It\u2019s built on top of popular libraries like <a href=\"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/\">Animate.css<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/\">Hint.css<\/a>, PrefixFree, Photon, Mousetrap and more.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/25-free-3d-modelling-applications-you-should-not-miss\/\" class=\"ref-block__link\" title=\"Read More: Best Free 3D Modeling Software\" rel=\"bookmark\"><span class=\"screen-reader-text\">Best Free 3D Modeling Software<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/25-free-3d-modelling-applications-you-should-not-miss.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-2295 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/25-free-3d-modelling-applications-you-should-not-miss.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Best Free 3D Modeling Software<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\t3D-modeling tools are instrumental in transforming individual concepts into stunning models and prototypes across various sectors. Whether you're...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Overview<\/h2>\n<p>Unfortunately, this app is just for Webkit-based browsers which means it\u2019s <strong>only supported on Chrome, Safari<\/strong> and <strong>Opera 15+<\/strong>. Let\u2019s hope that it\u2019ll come to Firefox soon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/getting-started-button.png\" width=\"500\" height=\"320\"><\/figure>\n<p>To get you started, Tridiv comes with three types of 3D shapes. Below are examples of basic, medium and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/juliangarnier\/pen\/hzDAF\">advanced shape<\/a>s. As you can see, the <strong>level of difficulty depends on how many shapes and faces<\/strong> <strong>there are<\/strong>. The higher the number, the harder it becomes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/example-shapes.png\" width=\"500\" height=\"300\"><\/figure>\n<p>To see what\u2019s inside, let\u2019s start by loading the basic shape of iPhone 4S. You\u2019ll then be brought to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/tridiv.com\/app\/\">Editor page<\/a>. In Tridiv, there are two main pages: <strong>Editor<\/strong> and <strong>Preview<\/strong>. You can work on creating the shapes in Editor mode, then flesh it out using the many tools available in the Preview mode.<\/p>\n<h2>Working With The Editor<\/h2>\n<p>At first glance, the Editor page looks like a simplified version of Blender. With all the tools located only on the right and on top, Tridiv focuses on the <strong>four-panel interface editor.<\/strong> The interface shows you the angle of the shape from the top, front and side views. Inside the different panels, you can rotate, edit, duplicate and delete the shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/editor-mode.png\" width=\"500\" height=\"234\"><\/figure>\n<p>On the top right of the page, there are <strong>project management controls<\/strong> to rename, save, open and create new projects. When you save the project, it will be stored locally on your computer. The saved document can be used in the future with the Open project feature.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/project-management.png\" width=\"500\" height=\"100\"><\/figure>\n<p>The <strong>main features of shape creation<\/strong> are located right next to the project management controls. To create a cool 3D object, you should play around with all the different shapes: cuboid, cylinder, prism and pyramid. With the right shape combination and editing using the Move and Edit selection tool, you can create your desired shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/top-editor-panel.png\" width=\"500\" height=\"100\"><\/figure>\n<p>Additional settings like Document and Shape properties, and styles are available on the right side of the document. More options for these are showcased after you select the shape you\u2019ve added.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/right-editor-panel.png\" width=\"500\" height=\"250\"><\/figure>\n<h2>Preview Mode<\/h2>\n<p>Preview mode is where you can finalize the design. You can\u2019t edit here and will <strong>only be able to retouch the shape<\/strong> to make it look perfect for your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/preview-mode.png\" width=\"500\" height=\"233\"><\/figure>\n<p>All the tools to make your shape fancy are on the right panel, you can <strong>add lighting, borders and change the background color<\/strong>. If you want to show your design off, an embed code is available on the top page. Just copy and paste the code onto your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/right-preview-panel.png\" width=\"500\" height=\"435\"><\/figure>\n<p>While you\u2019re editing, Tridiv is also <strong>generating the HTML and CSS as you go<\/strong> enabling you to use the shape without iframe. You can also edit the code within Tridiv or over on CodePen.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/code-generator.png\" width=\"500\" height=\"415\"><\/figure>\n<h2>Final Thoughts<\/h2>\n<p>Indeed, Tridiv is the only powerful app for CSS 3D editor on the web so far. However, there is <strong>currently<\/strong> <strong>a lack of documentation and tutorials<\/strong>. It\u2019s going to take some time to understand how to use the tool. Nonetheless, it is a still an amazing and useful app that is helmed by only one man, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/juliangarnier.com\/\">Julian Garnier<\/a>.<\/p>\n<p>A good way to utilize Tridiv is for the creation of animated logos, like the one you see on its landing page, and simple UI elements. So tell us what would you build with this tool?<\/p>","protected":false},"excerpt":{"rendered":"<p>Have you ever worked with 3D on the web? If so, then you\u2019re probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D graphics rendering on your web browser without the use of plugins. In this post, we are introducing Tridiv, a free web app for creating CSS 3D shapes&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create CSS 3D Shape EasilyUsing Tridiv - Hongkiat<\/title>\n<meta name=\"description\" content=\"Have you ever worked with 3D on the web? If so, then you&#039;re probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create CSS 3D Shape EasilyUsing Tridiv\" \/>\n<meta property=\"og:description\" content=\"Have you ever worked with 3D on the web? If so, then you&#039;re probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-06T05:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-16T08:57:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/getting-started-button.png\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Create CSS 3D Shape EasilyUsing Tridiv\",\"datePublished\":\"2014-05-06T05:01:04+00:00\",\"dateModified\":\"2023-06-16T08:57:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/\"},\"wordCount\":645,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-shape-tridiv\\\/getting-started-button.png\",\"keywords\":[\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/\",\"name\":\"Create CSS 3D Shape EasilyUsing Tridiv - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-shape-tridiv\\\/getting-started-button.png\",\"datePublished\":\"2014-05-06T05:01:04+00:00\",\"dateModified\":\"2023-06-16T08:57:11+00:00\",\"description\":\"Have you ever worked with 3D on the web? If so, then you're probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-shape-tridiv\\\/getting-started-button.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-3d-shape-tridiv\\\/getting-started-button.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-3d-shape-tridiv\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create CSS 3D Shape EasilyUsing Tridiv\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create CSS 3D Shape EasilyUsing Tridiv - Hongkiat","description":"Have you ever worked with 3D on the web? If so, then you're probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/","og_locale":"en_US","og_type":"article","og_title":"Create CSS 3D Shape EasilyUsing Tridiv","og_description":"Have you ever worked with 3D on the web? If so, then you're probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D","og_url":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-06T05:01:04+00:00","article_modified_time":"2023-06-16T08:57:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/getting-started-button.png","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Create CSS 3D Shape EasilyUsing Tridiv","datePublished":"2014-05-06T05:01:04+00:00","dateModified":"2023-06-16T08:57:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/"},"wordCount":645,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/getting-started-button.png","keywords":["CSS","CSS Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/","url":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/","name":"Create CSS 3D Shape EasilyUsing Tridiv - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/getting-started-button.png","datePublished":"2014-05-06T05:01:04+00:00","dateModified":"2023-06-16T08:57:11+00:00","description":"Have you ever worked with 3D on the web? If so, then you're probably familiar with WebGL (Web Graphics Library), a JavaScript API intended for 3D and 2D","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/getting-started-button.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-3d-shape-tridiv\/getting-started-button.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-3d-shape-tridiv\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create CSS 3D Shape EasilyUsing Tridiv"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5c3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19967"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19967\/revisions"}],"predecessor-version":[{"id":67519,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19967\/revisions\/67519"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19967"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}