{"id":20531873,"url":"https://github.com/ad5001/enecss","last_synced_at":"2026-05-18T03:11:06.308Z","repository":{"id":185242337,"uuid":"606932512","full_name":"Ad5001/Enecss","owner":"Ad5001","description":"A CSS library to facilitate the creation of low-poly 3D scenes using only CSS. Mirror of","archived":false,"fork":false,"pushed_at":"2023-03-09T23:35:41.000Z","size":30,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T04:26:37.582Z","etag":null,"topics":["css","css-3d","css-3d-engine","css-transform","css-transformations","css-transforms","javascriptless","sass","scss","state"],"latest_commit_sha":null,"homepage":"https://git.ad5001.eu/Ad5001/Enecss","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ad5001.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-02-27T00:29:47.000Z","updated_at":"2024-04-04T02:47:51.000Z","dependencies_parsed_at":"2023-08-01T08:01:23.473Z","dependency_job_id":null,"html_url":"https://github.com/Ad5001/Enecss","commit_stats":null,"previous_names":["ad5001/enecss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ad5001/Enecss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ad5001%2FEnecss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ad5001%2FEnecss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ad5001%2FEnecss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ad5001%2FEnecss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ad5001","download_url":"https://codeload.github.com/Ad5001/Enecss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ad5001%2FEnecss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33163441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","css-3d","css-3d-engine","css-transform","css-transformations","css-transforms","javascriptless","sass","scss","state"],"created_at":"2024-11-16T00:10:34.893Z","updated_at":"2026-05-18T03:11:06.289Z","avatar_url":"https://github.com/Ad5001.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# enecss\n(or backwards, sscene)\n\nA CSS library to facilitate the creation of low-poly 3D scenes using only CSS.\n\n---\n\n## Building\n\nUse [Sass](https://sass-lang.com/) to build enecss...\n```bash\nsass src/main.scss main.css\n```\n...or include it into your own builds.\n```sass\n@import \"enecss/src/main.scss\";\n```\n\n## Using\n\n### Creating the scene\n\nOnce you've included enecss into your HTML file, you can declare a scene and a root node in HTML using the following:\n```html\n\u003csection class=\"scene\"\u003e\n    \u003cfigure class=\"root\" style='--width: 400px; --height: 400px;'\u003e\n    \u003c/figure\u003e\n\u003c/section\u003e\n```\n\nThe 2D size of the scene is provided in the `--width` and `--height` variables. The default depth is `600px`, and is currently hardcoded.\n\n**Note**: This guide will make extensive use of inline styling for ease of use and easy representability. If your context does not allow you to use this tool, you can just declare an ID to every node and port those styles to a stylesheet.\n**Note**: A `section` is not mandatory for the scene node. However, the `figure` node is necessary for every object element you want to create.\n\n### Creating objects\n\nThere are a few basic objects. All parameters of the objects will be specified in CSS variables (which, as mentioned previously, can be set either inline or via a stylesheet).\n\n1. The basic mesh\n\nThis is the most basic element in the list, a rectangle. It doesn't even need to be a `figure`, and can take a single texture, which will be reproduced on both its sides.\n\nExample: A white rectangle with a black outline.\n```html\n\u003cdiv style=\"width: 500px; height: 500px; background: white; outline: solid 1px black;\"\u003e\u003c/div\u003e\n```\n\nOther objects are often composed of basic meshes, to which you can style and use like any other HTML element (See [Manipulating meshes](#Manipulating-meshes))\n\n2. Axises\n\nObject transformations are relative to their own position and rotation. If you're having trouble figuring out which way is which, you can use the `axises` object.\n\nYou can declare one using a `figure` with the `axises` class. A plane has four optional parameters like `--width` and `--height` for its two dimentions, and `--length` and `--length2` for the dimensions of the axis themselves.\n\nCode to add axises:\n```html\n\u003cfigure class=\"axises\"\u003e\n    \u003cdiv class=\"axis axis-x\"\u003ex\u003c/div\u003e\n    \u003cdiv class=\"axis axis-y\"\u003ey\u003c/div\u003e\n    \u003cdiv class=\"axis axis-z\"\u003ez\u003c/div\u003e\n\u003c/figure\u003e\n```\n\n3. Plane\n\nThe biggest problem of the basic mesh is that the texture is reproduced on both sides. A plane allows for one texture on each side by superposing two basic meshes.\n\nYou can declare a plane by using a `figure` with the `plane` class. A plane has two parameters `--width` and `--height` for its two dimentions.\n\nExample: A dual textured plane.\n```html\n\u003cfigure class=\"plane\" style='--width: 100px; --height: 200px;'\u003e\n    \u003cimg class=\"face front\" src=\"side1.png\" /\u003e\n    \u003cimg class=\"face back \" src=\"side2.png\" /\u003e\n\u003c/figure\u003e\n```\n\n4. Cube\n\nCubes are, well, cubes. It uses six square basic meshes to create one cube.\n\nYou can declare a plane by using a `figure` with the `cube` class. A plane has one parameter: `--size` for its verticle size.\n\nExample: A cube with a texture on the front.\n```html\n\u003cfigure class=\"cube\" style='--size: 200px;'\u003e\n    \u003cimg class=\"face front \" src=\"side1.png\" /\u003e\n    \u003cdiv class=\"face back  \"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face right \"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face left  \"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face top   \"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face bottom\"\u003e\u003c/div\u003e\n\u003c/figure\u003e\n```\n\n5. Cuboid Rectangular\n\nThey're like cubes, but with different dimensions for every side.\n\nYou can declare one by using a `figure` with the `cuboid rectangular` classes. It has has three parameter: \n- `--width` for its horizontal (x) size.\n- `--length` for its vertical (y) size.\n- `--depth` for its (z) size.\n\nExample: A simple white cuboid rectangular with outlined verticles.\n```html\n\u003cfigure class=\"cuboid rectangular\" style='--length: 7px; --width: 10px; --depth: 20px;'\u003e\n    \u003cdiv class=\"face front \" style=\"outline: solid 1px black;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face back  \" style=\"outline: solid 1px black;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face left  \" style=\"outline: solid 1px black;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face right \" style=\"outline: solid 1px black;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face top   \" style=\"outline: solid 1px black;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"face bottom\" style=\"outline: solid 1px black;\"\u003e\u003c/div\u003e\n\u003c/figure\u003e\n```\n\n6. Cylinder\n\nCylinders in this framework work by using several simple meshes to make it an n-sides prism.\n\nYou can declare one by using a `figure` with the `cylinder` classes. It has has three parameter: \n- `--radius` for the radius of the base.\n- `--height` for its vertical (y) size.\n- `--strip-count` Number of stripes to use (24 by default, 90 max).\n\nYou can have the cylinder textured by adding the `textured` class, and linking an image in the `--texture` variable. Enecss will fill the stripes with the texture from left to right.\n\nExample: A textured cylinder.\n```html\n\u003cfigure class=\"cylinder textured\" style='--height: 170px; --radius: 18px; --strip-count: 24; --texture: url(/texture.png);'\u003e\n    \u003cdiv class=\"strip strip-1\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-3\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-4\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-5\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-6\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-7\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-8\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-9\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-10\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-11\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-12\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-13\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-14\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-15\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-16\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-17\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-18\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-19\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-20\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-21\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-22\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-23\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"strip strip-24\"\u003e\u003c/div\u003e\n\u003c/figure\u003e\n```\n\n**Note regarding editing objects**: I recommend using your web browser's dev tools to edit elements, then save the copy back the modified HTML from there.\n\n### Parenting objects\n\nWhen you use several objects, you can 'parent' them to one another (just like you would in any 3D editor), in the same way you would parent any node in HTML.\n\n```html\n\u003cfigure id=\"parent\" style='transform: rotateY(30deg);'\u003e\n    \u003cfigure id=\"child\" class=\"cube position-at-center\" style='--size: 100px;'\u003e\n        \u003cdiv class=\"face front \" style=\"background: white;\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"face back  \" style=\"background: white;\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"face right \" style=\"background: white;\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"face left  \" style=\"background: white;\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"face top   \" style=\"background: white;\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"face bottom\" style=\"background: white;\"\u003e\u003c/div\u003e\n    \u003c/figure\u003e\n\u003c/figure\u003e\n```\n\nAll the transformations of the parent will be applied to the child, which means in this case, the cube will be rotated 30° on the Y axis.\n\n**Note**: The `position-at-center` class allow for objects that do NOT have applied transform to position themselves at the center of their parents. The same result can be achieved by prepending `translateX(-50%) translateY(-50%)` to the object's transform.\n\n### Manipulating mesh\n\nEvery lowest level node is a 3D 'mesh' (a rectangular plane object, in this case). It is important to note that you can use *any* html element as a mesh.\n- `div` will not provide anything by default\n- `a` will make a 3D clickable link or state switcher (more on that later)\n- `button` will allow for a clickable surface with a temporary state (more on that later)\n- `img` will make for a texturable surface.\n- `video` can make a 3D video player (no performance waranty though)\n\nAnd best of all! They can be nested!\n\nFor example...\n```html\n\u003cdiv class=\"face front\"\u003e\n    \u003cimg class=\"fill\" src=\"texture.png\"/\u003e\n    \u003ca class=\"fill\" href=\"#state1\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n```\n... is a clickable textured element.\n\nIf you want to hide even a single mesh, you can use the `hidden` class, or even better.    \nIf you're not sure where a specific mesh is, you can add the `debug` class to it, which will add a red outline to the mesh.\n\n### Basic interactivity\n\nIf you want to be able to rotate the object around using your mouse, you can add view sections nodes *on the same level as the scene node, just before it*.\n```html\n\u003cdiv class=\"view-section view-top-0 view-left-0\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-1\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-2\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-3\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-4\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-5\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-6\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-7\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-0 view-left-8\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-1 view-left-0\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-1 view-left-1\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-1 view-left-2\"\u003e\u003c/div\u003e\n\u003cdiv class=\"view-section view-top-1 view-left-3\"\u003e\u003c/div\u003e\n...\n\u003cdiv class=\"view-section view-top-8 view-left-8\"\u003e\u003c/div\u003e\n```\n\nThis divides the screen in 81 sections to allow for gradual rotation from the center of the scene.\n\n### Advanced interactivity: States\n\n'States' is the most advanced feature you can use to save interaction data in CSS. It's possible to use the location hashmap to save a current state which, best of all, can stay registered even if the user erases his cookies.\n\nThough only one state can be detected at the time, it's possible to create multiple CSS variables that vary depending on the state.\n\n#### Registering a new state\n\nFirst of all, to register a state, you should create a new element *on the same level as the scene node, just before it*.\n\nFor instance:\n```html\n\u003cdiv id=\"state1\"\u003e\u003c/div\u003e\n...\n\u003csection class=\"scene\"\u003e\n```\n\nAnd there you go! You have registered a new state. The `div`'s id is what will be refered as the state's name from now on.\n\n#### Entering the state\n\nIn order to enter a state, there are two ways.\n\nYou can use Javascript (which kind of destroys the purpose) OR use an `a` element.\n```html\n\u003ca href=\"#state1\"\u003eClick me!\u003c/a\u003e\n```\n\nBy clicking the element, the user will be able to change the state of the scene.\n\nAs mentioned before, you can use `a` elements in meshes, meaning you can have *interactive meshes* that change the state of the scene.\n\nFor instance, on a plane:\n```html\n\u003cfigure class=\"plane\"\u003e\n    \u003cdiv class=\"face front\"\u003e\n        \u003cimg class=\"fill\" src=\"texture.png\"/\u003e\n        \u003ca class=\"fill\" href=\"#state1\"\u003e\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"face back\"\u003e\u003c/div\u003e\n\u003c/figure\u003e\n```\n\n#### Detecting and Using States\n\nNow that we know how to declare and enter states, let's get into the heart of the matter.\nDetecting states is pretty easy: in your CSS file, we can use a combinasion of the `:target` element and the [General sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) to apply custom styles to the scene using states.\n\nFor instance:\n```css\n#state1:target ~ section.scene {\n    /* custom styles here */\n}\n```\n\nYou can even apply styles to specific elements:\n```css\n#state1:target ~ section.scene #element {\n    /* custom styles here */\n}\n```\n\n#### Locking rotation\n\nIf you use many different kinds of of rotation, it might be a good idea to lock it based on certain states.\n\nTo do so, use the scene selector, and set the `--rotation-x` and `--rotation-y` to fixed `!important` values.\n\n```css\n#state1:target ~ section.scene {\n    --rotation-x: -40deg !important;\n    --rotation-y: 40deg !important;\n}\n```\n\nIf you're still having trouble with selecting interactive elements, you might add the class `interactive` to your root, or any large enough element to lock the location on the current default.\n\n### Tooltips\n\nHaving tooltips can help the user know what they are pointing at. Any `interactive` element (with the class, or `a` or `button`) can have one, using a div with the `tooltip` class. You can apply transforms to the tooltip for it to appear exactly where you want it to.\n\nExample:\n```html\n\u003cfigure class=\"cuboid rectangular interactive\"\u003e\n    ...\n    \u003cdiv class=\"tooltip\" style=\"transform: translateY(-30px) translateX(-20px) translateZ(50px) rotateX(-90deg);\"\u003eClick me!\u003c/div\u003e\n\u003c/figure\u003e\n```\n\n## Examples\n\nThere is a sample cube example which makes use of practically everything you saw before in the `examples/cube` folder. [Test it out online.](https://cdn.githubraw.com/Ad5001/Enecss/example/examples/cube/cube.html)\n\n## F.A.Q.\n\n### Why?\n\nThe question you're looking for is: \"Why not?\" I created this for fun, but maybe someone, somewhere, will find some use of this. Pretty sure there exists plenty of environements on the web that allows CSS and not JS.\n\n### Enterprise Support?\n\nNo. At least, not for now.\n\n### Shadows? Shaders? Raytracing?\n\n✨Unimplementable✨ (at least with just CSS)\n\n## Credits\n\nThis framework contains organised research led by various other people. In no particular order:\n\n- Cylinder by [allenski on StackOverflow](https://stackoverflow.com/a/66130780)\n- States by [Robin Rendle](https://css-tricks.com/a-whole-website-in-a-single-html-file/)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fad5001%2Fenecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fad5001%2Fenecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fad5001%2Fenecss/lists"}