Press "Enter" to skip to content

Sass Library for 2D Isometric Creation In Pure CSS/SASS | IsometricSass

IsometricSass is a Sass framework that does not require JavaScript. It was created to be able to usefully 3D CSS transforms to create 3D scenes. Using 3D graphics contexts in JavaScript often comes to the detriment of performance and support for some browsers.

css isometric tiles, css isometric text, html5 isometric, html5 canvas draw isometric grid, html canvas isometric, javascript isometric map, isomer js

CSS mini Framework Aimed to Display Isometric Cubes | Cube.CSS

How to make use of it:

Import the IsometricSass.

@import isometric

Create a fundamental isometric context.

<div class="isometric-container">
  <div class="isometric">
    2D isometric
  </div>
</div>

Create an isometric grid.

<div class="isometric-container">
  <div class="isometric">
    <div class="grid"></div>
  </div>
</div>
.grid
  +grid($size, $colo)

Create an isometric plane.

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
  </div>
</div>
.plane
  +plane($width, $height, $color)

Add a border to the isometric object.

.plane
  +plane($width, $height, $color)
  +border($size, $color)

Add an edge to the isometric object.

.plane
  +plane($width, $height, $color)
  +edge($depth, $color)

Add a shadow to the isometric object.

.plane
  +plane($width, $height, $color)
  +shadow($size, $size*.1, $size*.3)

Create a 3D cube.

<div class="isometric-container">
  <div class="isometric">
    <div class="cube">
      <div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
  </div>
</div>
.cube
  +cube($width, $height, $depth, $color)

Set the position (x, y, z).

.plane
  +plane($width, $height, $color)
  top: $X
  left: $Y
  transform: translateZ($Z)

Animate the isometric object.

.plane
  +plane($width, $height, $color)
  +animation($name, $attribute, $from, $to, $delay, $duration, $options)

Move the shadow.

.plane
  +moveShadow($name, $from, $to, $spacingX, $spacingY, $delay, $duration, $options)

Rotate the isometric object.

.plane
  +rotate($name, $from, $to, $delay, $duration)

2D Isometric Engine, IsometricSass Plugin/Github


See Demo And Download

Official Website(MorganCaron): Click Here

This superior jQuery/javascript plugin is developed by MorganCaron. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.