Author: | MorganCaron |
---|---|
Views Total: | 657 views |
Official Page: | Go to website |
Last Update: | May 30, 2021 |
License: | MIT |
Preview:

Description:
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