{"id":13399909,"url":"https://github.com/zachstronaut/quintessential-css-cube","last_synced_at":"2026-01-18T11:35:54.203Z","repository":{"id":28195572,"uuid":"31697670","full_name":"zachstronaut/quintessential-css-cube","owner":"zachstronaut","description":".qube -- The Quintessential Responsive 3D CSS Cube","archived":false,"fork":false,"pushed_at":"2021-05-30T23:31:33.000Z","size":998,"stargazers_count":66,"open_issues_count":0,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-07-30T19:22:44.698Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zachstronaut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-05T05:34:57.000Z","updated_at":"2024-05-03T11:37:40.000Z","dependencies_parsed_at":"2022-07-21T03:18:45.594Z","dependency_job_id":null,"html_url":"https://github.com/zachstronaut/quintessential-css-cube","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachstronaut%2Fquintessential-css-cube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachstronaut%2Fquintessential-css-cube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachstronaut%2Fquintessential-css-cube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachstronaut%2Fquintessential-css-cube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zachstronaut","download_url":"https://codeload.github.com/zachstronaut/quintessential-css-cube/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243526885,"owners_count":20305109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:00:44.928Z","updated_at":"2026-01-18T11:35:54.193Z","avatar_url":"https://github.com/zachstronaut.png","language":"CSS","funding_links":[],"categories":["CSS","🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Css 3D Effect"],"readme":"# `.qube`\n\n## Quintessential Responsive 3D CSS Cube\n\n_Created by [@zacharyjohnson](http://twitter.com/zacharyjohnson) \u0026mdash; [zachstronaut.com](http://www.zachstronaut.com/)_\n\nHello web friend! The styles defined in `\"src/qube.css\"` provide you with an ideal way to create 3D CSS3 cubes that are exceptionally easy to work with and very extensible.\n\n### Examples / Demo\n\n[View the Examples / Demo](https://zachstronaut.github.io/quintessential-css-cube/)\n\n### Features\n\n1.  **Flexible markup!** \u0026mdash; Build your cubes using `\u003cdiv\u003e` tags, `\u003cul\u003e \u003cli\u003e`, or whatever markup you prefer.  And, put your cube faces in whatever source order you need by using face classes.\n\n  ```html\n  \u003cdiv class=\"qube-perspective\"\u003e\n  \t\u003c!-- Your first cube! --\u003e\n  \t\u003cul class=\"qube my-cube\"\u003e\n  \t\t\u003cli class=\"front\"\u003e\u003c/li\u003e\n  \t\t\u003cli class=\"left\"\u003e\u003c/li\u003e\n  \t\t\u003cli class=\"back\"\u003e\u003c/li\u003e\n  \t\t\u003cli class=\"right\"\u003e\u003c/li\u003e\n  \t\t\u003cli class=\"top\"\u003e\u003c/li\u003e\n  \t\t\u003cli class=\"bottom\"\u003e\u003c/li\u003e\n  \t\u003c/ul\u003e\n  \u003c/div\u003e\n  ```\n\n2.  **Specify the size and color/texture of your cube with _just two_ simple CSS rules.**\n\n  ```css\n  /* Make your cube red and 200 x 200 x 200px */\n  .my-cube {\n  \twidth: 200px;\n  \theight: 200px;\n  }\n\n  \t.my-cube \u003e * {\n  \t\tbackground: red;\n  \t}\n  ```\n\n3.  **Automatic flat shading!** \u0026mdash; Your cubes will automatically get basic shading, regardless of the color, image texture, or HTML content you define for the cube faces. _(This can be easily customized or disabled entirely with: `.qube.no-shading`)_\n\n  ![Rotating Shaded Cube](http://zachstronaut.github.io/quintessential-css-cube/images/brick-shaded.gif)\n\n4.  **Create responsively resizing cubes!** \u0026mdash; Really easy with the surprisingly well supported CSS [viewport units](http://caniuse.com/#search=viewport%20unit).\n\n  ```css\n  /* This responsive cube will be 25% of the viewport width */\n  .my-viewport-responsive-cube {\n  \twidth: 25vw;\n  \theight: 25vw; /* Cubes need 1:1 ratio! */\n  }\n  ```\n\n  For more conventional responsive design, you can set your cube's width and height to a percentage of its parent element.  (By default, `.qube` is actually 100% width and 100% height.) _However,_ some care must be taken to make sure that the container element maintains a 1:1 aspect ratio.\n\n  ```html\n  \u003cdiv class=\"qube-perspective one-half\"\u003e\n  \t\u003cdiv class=\"qube\"\u003e\n  \t\t... faces ...\n  \t\u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n  ```css\n  .one-half {\n  \tposition: relative;\n  \twidth: 50%;\n  \tpadding-top: 100%;\n  \t/* Sets height to 100% of width, forcing a 1:1 aspect ratio */\n  }\n  \n  \t.one-half .qube {\n  \t\t/* Center this cube in the parent */\n  \t\tposition: absolute;\n  \t\tleft: 0;\n  \t\tright: 0;\n  \t\ttop: 0;\n  \t\tbottom: 0;\n  \t\tmargin: auto;\n\n  \t\t/* Each of this cube's faces will be\n  \t\t   a responsive 25% of the parent */\n  \t\twidth: 25%;\n  \t\theight: 25%;\n  \t}\n  ```\n\n5.  **Easily rotate your cube along the X, Y, or Z-axis!** \u0026mdash; Your cube will neatly rotate about its center.\n\n  ```css\n  .my-cube {\n  \ttransition: transform 1500ms ease;\n  }\n  \n  \t.my-cube:hover {\n  \t\ttransform: rotateY(359deg);\n  \t}\n  ```\n\n6.  **Optionally, you can skip the face name classes.** \u0026mdash; Use `.qube.faces` to turn your elements into faces automatically. **Note:** This _does_ dictate the source order of your cube faces.\n\n  ```html\n  \u003cul class=\"qube faces my-automatic-cube\"\u003e\n  \t\u003cli\u003eMy front\u003c/li\u003e\n  \t\u003cli\u003eMy left\u003c/li\u003e\n  \t\u003cli\u003eMy back\u003c/li\u003e\n  \t\u003cli\u003eMy right\u003c/li\u003e\n  \t\u003cli\u003eMy top\u003c/li\u003e\n  \t\u003cli\u003eMy bottom\u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n\n7.  **Handy utilities and optimizations!** \u0026mdash; Use `.qube-perspective` on a parent element to setup your 3D viewport. Use `.qube-preserve3d` as a shortcut if you need it.  Use `.qube.solid` as an optimization when your cube is not semi-transparent, and you are not displaying the inside of your cube.\n\n8.  **Customize individual cube faces!** \u0026mdash; It's a snap to change the color or other styles of a single cube face. You can even skip a cube face so people can peek inside.\n\n  ```css\n  /* Make just the front blue */\n  .my-cube \u003e .front {\n  \tbackground: blue;\n  }\n  ```\n\n  ```html\n  \u003cul class=\"qube my-peekaboo-cube\"\u003e\n  \t\u003c!-- Skipped the front so we can look inside --\u003e\n  \t\u003cli class=\"left\"\u003e\u003c/li\u003e\n  \t\u003cli class=\"back\"\u003e\u003c/li\u003e\n  \t\u003cli class=\"right\"\u003e\u003c/li\u003e\n  \t\u003cli class=\"top\"\u003e\u003c/li\u003e\n  \t\u003cli class=\"bottom\"\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n  ```\n\n### Usage\n\nDownload this GitHub project, add the `\"src/qube.css\"` or `\"src/qube.min.css\"` CSS file to your project, and include the file in your `\u003chead\u003e`.\n\n```html\n\u003clink href=\"/my/path/qube.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n```\n\nDefine your cube using your preferred markup. **Note:** If you do not use `.qube-perspective` it will be important to establish your own CSS `perspective` settings or your cubes will look flat.\n\n```html\n\u003cdiv class=\"qube-perspective\"\u003e\n\t\u003cdiv class=\"qube my-cube\"\u003e\n\t\t\u003cdiv class=\"front\"\u003eHey!\u003c/div\u003e\n\t\t\u003cdiv class=\"left\"\u003eHowdy!\u003c/div\u003e\n\t\t\u003cdiv class=\"back\"\u003eHi!\u003c/div\u003e\n\t\t\u003cdiv class=\"right\"\u003eHello!\u003c/div\u003e\n\t\t\u003cdiv class=\"top\"\u003eFoo\u003c/div\u003e\n\t\t\u003cdiv class=\"bottom\"\u003eBar\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nStyle your cube.\n\n```css\n/* Create a 200 by 200 by 200px cube... */\n.my-cube {\n\twidth: 200px;\n\theight: 200px;\n\t/* (It is a CUBE, so the width/height are EQUAL.) */\n}\n\n\t/* ...that is red. */\n\t.my-cube \u003e * {\n\t\tbackground: #f00;\n\t}\n```\n\n### Browser Support\n\n*  Tested in Chrome 16+, Firefox 10+, Safari 5+, Android 3+, and iOS 4+\n*  Compatible with browsers that fully support [CSS3 3D Transforms](http://caniuse.com/#search=3d%20transform).\n\n### Intro to 3D CSS3 (Helpful Prerequisites)\n\nI recommend that you read this very helpful [intro to 3D CSS3 properties](http://24ways.org/2010/intro-to-css-3d-transforms) and this [CSS cube reference](http://desandro.github.io/3dtransforms/docs/cube.html).  You are going to have a lot fewer headaches if you already understand how and when to use these CSS properties:\n\n*  `perspective: 1234px;`\n*  `transform-style: preserve-3d;`\n*  `transform: translateZ(0);`\n\n### Change Log\n\n**2015-03-04**  \n*  GitHub Release\n\n### Author / License ##\n\nThis project was created by Zachary Johnson. You can find him on Twitter [@zacharyjohnson](http://twitter.com/zacharyjohnson) and also at [zachstronaut.com](http://www.zachstronaut.com/).\n\nThis code is released under an MIT style license.  See `LICENSE.txt`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachstronaut%2Fquintessential-css-cube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachstronaut%2Fquintessential-css-cube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachstronaut%2Fquintessential-css-cube/lists"}