https://github.com/elchininet/isometric-css

Isometric-CSS is a lightweight JavaScript library to build isometric projections through declarative HTML attributes.
https://github.com/elchininet/isometric-css

css css-animation css-animations css-transformations css-transforms draw drawing engineering engineering-drawing graphics isometric isometric-css isometric-projection isometric-projections javascript orthogonal orthogonal-projection projection transformation typescript

Last synced: 5 months ago
JSON representation

Isometric-CSS is a lightweight JavaScript library to build isometric projections through declarative HTML attributes.

• Host: GitHub
• URL: https://github.com/elchininet/isometric-css
• Owner: elchininet
• License: apache-2.0
• Created: 2021-01-22T12:52:22.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2025-05-04T13:24:27.000Z (5 months ago)
• Last Synced: 2025-05-04T14:23:12.520Z (5 months ago)
• Topics: css, css-animation, css-animations, css-transformations, css-transforms, draw, drawing, engineering, engineering-drawing, graphics, isometric, isometric-css, isometric-projection, isometric-projections, javascript, orthogonal, orthogonal-projection, projection, transformation, typescript
• Language: TypeScript
• Homepage: https://elchininet.github.io/isometric-css/
• Size: 10.3 MB
• Stars: 60
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          


    

        

    

    


    A lightweight JavaScript library to build isometric projections through declarative HTML attributes



[![Deployment Status](https://github.com/elchininet/isometric-css/actions/workflows/deploy.yaml/badge.svg)](https://github.com/elchininet/isometric-css/actions/workflows/deploy.yaml)

[![Test](https://github.com/elchininet/isometric-css/actions/workflows/test.yaml/badge.svg)](https://github.com/elchininet/isometric-css/actions/workflows/test.yaml)

[![Coverage Status](https://coveralls.io/repos/github/elchininet/isometric-css/badge.svg?branch=master)](https://coveralls.io/github/elchininet/isometric-css?branch=master)

[![npm version](https://badge.fury.io/js/isometric-css.svg)](https://badge.fury.io/js/isometric-css)

## Isometric-CSS

[Isometric-CSS](https://elchininet.github.io/isometric-css/) is a lightweight `JavaScript` library to easily build isometric projections through declarative HTML attributes, so no `JavaScript` knowledge is required. You just need to add the `isometric` class and specific data attributes to the elements, and on page-load CSS rules will be created and applied to give them the desired transformation or animations. It is also possible to transform or animate the elements dynamically using the `JavaScript` API (read the [API section](https://elchininet.github.io/isometric-css/library-api) for more details).

## Demo and Documentation

https://elchininet.github.io/isometric-css/