Add 3D rotation feel without the need of rendering the whole 3D object on your webpage.
Preview the demo below
$200
Built to fit your foot and designed for comfort, the Sneakers brings back a street-level favorite.
$50
Enjoy your morning coffee or tea in style with this Cup Classy. The stone construction makes this mug durable, while its simple yet rustic look makes it easy for you to mix it in with the rest of your drinkware.
$3500
2010 Toyota Hatchback. 120,000 miles driven. Has clean title, runs and drives like new. This car is in very good running condition & cheap on gas.
If you are using npm
npm install skewuy
Or, if you use CDN
Add the following tag within head or body of your index.html This reference should be placed before the reference to the main javascript of your page.
<body>
...
<script src = "https://unpkg.com/skewuy"> </script>
<script src = "main.js"> </script>
</body>
<body>
...
<div id = "skewuyContainer"> </div>
...
1920 x 1080 px
main.js define the following to use as Skewuy properties.
// Height of the Skewuy Element
// The height should be at least 200 for better experience
// The default value is set to 200
const skHeight = 200;
// Number of frames in the spritesheet
const skframeCount = 15;
// Gap from left of the spritesheet
// The default value is set to 86
const skframeGutter = 86;
// Width of each frames in spritesheet
// The default value is set to 427
const skframeWidth = 427;
// URL of the spritesheet image
const spriteImg = "./res/sprite.jpg";
// Skewuy Container Element created previously
const skContainer = document.getElementById("skewuyContainer");
import skewuy from 'skewuy';
skewuy({ viewHeight: skHeight,
frameCount: skframeCount,
frameGutter: skframeGutter,
frameWidth: skFrameWidth,
srcImg: spriteImg,
skewuyContainer: skContainer
});