{"id":174,"date":"2015-09-18T08:08:18","date_gmt":"2015-09-18T08:08:18","guid":{"rendered":"http:\/\/codemyui.com\/numbers-cube-counter\/"},"modified":"2019-10-31T13:12:06","modified_gmt":"2019-10-31T02:12:06","slug":"numbers-cube-counter","status":"publish","type":"post","link":"https:\/\/codemyui.com\/numbers-cube-counter\/","title":{"rendered":"Numbers Cube Counter"},"content":{"rendered":"<p>Awesome 3D animation count down number cube counter using CSS. Designed by <a href=\"https:\/\/twitter.com\/GregorAdams\" target=\"_blank\" rel=\"noopener noreferrer\">Gregor Adams<\/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\/89f42d1b0caaaa3d54b2\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='502' data-theme-id='0' data-slug-hash='PPPmaL' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen numbers cube counter by Gregor Adams (@pixelass) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Awesome 3D animation count down number cube counter using CSS. Designed by Gregor Adams.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/numbers-cube-counter\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1013,"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":false,"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,1807,11122,5460],"class_list":["post-174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-3d","tag-animation","tag-css-counter","tag-cube","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/numbers-cube-counter.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":23235,"url":"https:\/\/codemyui.com\/hexagon-cube-loading-animation\/","url_meta":{"origin":174,"position":0},"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":182,"url":"https:\/\/codemyui.com\/3d-cube-for-tabbed-content\/","url_meta":{"origin":174,"position":1},"title":"3D Cube For Tabbed Content","author":"Hima Vincent","date":"September 14, 2015","format":false,"excerpt":"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 If\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Cube For Tabbed Content","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/3d-cube-for-tabbed-content.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\/3d-cube-for-tabbed-content.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/3d-cube-for-tabbed-content.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/3d-cube-for-tabbed-content.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26408,"url":"https:\/\/codemyui.com\/3d-cube-flip-navigation-menu\/","url_meta":{"origin":174,"position":2},"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":283,"url":"https:\/\/codemyui.com\/marvel-logo-animation-in-css\/","url_meta":{"origin":174,"position":3},"title":"Marvel Logo Animation in CSS","author":"Saijo George","date":"May 27, 2015","format":false,"excerpt":"See how you can replicate the logo from Marvel comics in pure CSS. This was created by Gregor Adams. You can see various marvel comics strip in the background which fades to a solid red background as the iconic Logo zooms out into the center. If you are having trouble\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Marvel Logo Animation in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/marvel-logo-animation-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/marvel-logo-animation-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/marvel-logo-animation-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/marvel-logo-animation-in-css.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":174,"position":4},"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":29369,"url":"https:\/\/codemyui.com\/offset-angled-cube-faces-to-button-background-on-hover-animation\/","url_meta":{"origin":174,"position":5},"title":"Offset Angled Cube Faces to Button Background on Hover Animation","author":"Saijo George","date":"February 3, 2020","format":false,"excerpt":"A fancy CSS only button hover effect where you have the 2 faces of an angled cube that acts as a button's background on hover by Daniel Gonzalez. If you are having trouble with the pen, try the archived copy on GitHub Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Offset-Angled-Cube-Faces-to-Button-Background-on-Hover-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\/02\/Offset-Angled-Cube-Faces-to-Button-Background-on-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Offset-Angled-Cube-Faces-to-Button-Background-on-Hover-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Offset-Angled-Cube-Faces-to-Button-Background-on-Hover-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\/174","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=174"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":28712,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/174\/revisions\/28712"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1013"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}