2D Isometric Engine In Pure CSS/SASS – IsometricSass

IsometricSass is a pure SASS isometric library which makes use of CSS3 transforms to create responsive 3D objects/scenes for games, apps, etc.

How to use it:

Import the IsometricSass.

@import isometric

Create a basic 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)

Changelog:

05/30/2021

• v1.0.7

05/05/2021

• v1.0.6

05/25/2020

• v1.0.4

03/16/2020

• v1.0.2

06/21/2019

• Minor update