{"id":182,"date":"2015-09-14T08:24:04","date_gmt":"2015-09-14T08:24:04","guid":{"rendered":"http:\/\/codemyui.com\/3d-cube-for-tabbed-content\/"},"modified":"2019-10-31T13:11:23","modified_gmt":"2019-10-31T02:11:23","slug":"3d-cube-for-tabbed-content","status":"publish","type":"post","link":"https:\/\/codemyui.com\/3d-cube-for-tabbed-content\/","title":{"rendered":"3D Cube For Tabbed Content"},"content":{"rendered":"<p>Tabbed content areas are a great way to pack sections of content into a neat, concise area with a nice user experience. This 3D cube tabbed content with the selection of the tab rotates the cube to the corresponding content area makes it super cool. Designed by <a href=\"https:\/\/twitter.com\/karaolthof\" target=\"_blank\" rel=\"noopener noreferrer\">Kara Olthof<\/a><\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/d1d13b45d395ec5031ce\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='412' data-theme-id='0' data-slug-hash='ojXMzV' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen 3D Cube for tabbed content by Kara Olthof (@raevenk) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Tabbed content areas are a great way to pack sections of content into a neat, concise area with a nice user experience. This 3D cube tabbed content with the selection of the tab rotates the cube to the corresponding content area makes it super cool. Designed by Kara Olthof<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/3d-cube-for-tabbed-content\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[2131,239174062,5460,1520705],"class_list":["post-182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-3d","tag-accordion-tabs","tag-cube","tag-navigation-menu","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/3d-cube-for-tabbed-content.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26408,"url":"https:\/\/codemyui.com\/3d-cube-flip-navigation-menu\/","url_meta":{"origin":182,"position":0},"title":"3D Cube Flip Navigation Menu","author":"Saijo George","date":"June 5, 2018","format":false,"excerpt":"Looking for some 3D effect to add to your website? How about this navigation menu by Mahmoud Zohdi that add a 3d flip to each page load? When you click on the navigation menu item it doe s a3d flip of the content and loads the pages in. If you\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Cube Flip Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/3D-Cube-Flip-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/3D-Cube-Flip-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/3D-Cube-Flip-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/3D-Cube-Flip-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":174,"url":"https:\/\/codemyui.com\/numbers-cube-counter\/","url_meta":{"origin":182,"position":1},"title":"Numbers Cube Counter","author":"Hima Vincent","date":"September 18, 2015","format":false,"excerpt":"Awesome 3D animation count down number cube counter using CSS. Designed by Gregor Adams. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Numbers Cube Counter","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/numbers-cube-counter.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/numbers-cube-counter.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/numbers-cube-counter.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/numbers-cube-counter.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3830,"url":"https:\/\/codemyui.com\/3d-flip-hover-animation-service-blocks\/","url_meta":{"origin":182,"position":2},"title":"3D Flip Hover Animation For Service Blocks","author":"Hima Vincent","date":"November 4, 2016","format":false,"excerpt":"This is something that we can use in a portfolio or on a service website where you have multiple boxes that outline various services that are offered. When you hover over each one of these boxes you will see that it will do a 3d flip and reveal more information\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Flip Hover Animation For Service Blocks","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/the-cube-service-box.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/the-cube-service-box.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/the-cube-service-box.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/the-cube-service-box.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":23235,"url":"https:\/\/codemyui.com\/hexagon-cube-loading-animation\/","url_meta":{"origin":182,"position":3},"title":"Hexagon to Cube Loading Animation","author":"Hima Vincent","date":"August 15, 2017","format":false,"excerpt":"A fancy loading animation that alternated between a cube that splits into a hexagon and gets put back together as a cube, it was designed by Ives van Hoorne in pure CSS. If you are having trouble with the pen, try the archived copy on GitHub Hexagon to Cube Animation\u2026","rel":"","context":"In \"cube\"","block_context":{"text":"cube","link":"https:\/\/codemyui.com\/tag\/cube\/"},"img":{"alt_text":"Hexagon to Cube Loading Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/hexagon-to-cube-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/hexagon-to-cube-loading-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/hexagon-to-cube-loading-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/hexagon-to-cube-loading-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":242,"url":"https:\/\/codemyui.com\/tabs-that-expands-and-changes-color\/","url_meta":{"origin":182,"position":4},"title":"Tabs that expands and changes\u00a0color","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"This is a neat way to use tabs for your content. It changes colors and height based on the content. Designed by\u00a0Lewi Hussey. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Tabs that expands and changes color","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Tabs-that-expands-and-changes-color.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Tabs-that-expands-and-changes-color.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Tabs-that-expands-and-changes-color.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/09\/Tabs-that-expands-and-changes-color.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29187,"url":"https:\/\/codemyui.com\/accordion-tabs-design-with-tab-label-slide-in-animation\/","url_meta":{"origin":182,"position":5},"title":"Accordion Tabs Design With Tab Label Slide-in Animation","author":"Saijo George","date":"January 10, 2020","format":false,"excerpt":"This is really cool material design card UI inspired accordion tab by Rafaela Lucas. There is an animation effect when you choose a tab, the tab title label gets a dropdown background and a text scroll effect and as the content is loaded the table label is also slid into\u2026","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Accordion Tabs Design With Tab Label Slide-in Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/182\/revisions"}],"predecessor-version":[{"id":28443,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/182\/revisions\/28443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1022"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}