box-3d-animate

small contribution for those who work with react and styled-components

Box 3d animate is just a library for create 3d box with your images.

Installation

require react and styled-components via yarn, just follow these simple commands:

$ yarn add box-3d-animate

or via npm:

$ npm install box-3d-animate --save

Basic use

import in your file js

...
import CreateBox3D from "box-3d-animate";
// import your images
import frontSide from "./imageF.jpg";
import backSide from "./imageB.jpg"
import leftSide from "./imageL.jpg"
import rightSide from "./imageR.jpg"
import topSide from "./imageT.jpg"
...
render() {
  return (
    <CreateBox3D
      defaultWidth={200}
      frontSide={frontSide}
      backSide={backSide}
      leftSide={leftSide}
      rightSide={rightSide}
      topSide={topSide}
    />
  );
}

Properties

Property	Default	Type	Values
leftSide	https://via.placeholder.com/200	String	url or import image
rightSide	https://via.placeholder.com/200	String	url or import image
frontSide	https://via.placeholder.com/200	String	url or import image
backSide	https://via.placeholder.com/200	String	url or import image
topSide	https://via.placeholder.com/200	String	url or import image
bottomSide	https://via.placeholder.com/200	String	url or import image
perspective	800px	String	900px, 1200px, ...
perspectiveOrigin	50% -150px	String	30% 50em, ...
duration	10s	String	1s, 300ms...
timingFunction	linear	String	ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end
iterationCount	infinite	String or Number	infinite or 0, 1, 3, ...
transformOrigin	50% 50% -2em	String	center, 50%, top bottom, 10% 80% ...
direction	normal	String	normal, reverse, alternate, alternate-reverse
animationName	roundsY	String	rounds, roundsY, roundsX
defaultWidth	200	Number	300, 150, ...
maxWidth	150px	String	200px, ...
margin	5em auto auto	String	1px, auto 0, 4px auto 5px, ...
shadowBottom	true	Boolean	true, false
loading	<LoadingComponent />	ReactNode	<span>loading...</span> ...
SSR	false	Boolean	true, false

Nextjs example

...
import CreateBox3D from "box-3d-animate";
...
render() {
  return (
    <CreateBox3D
      SSR={true}
      ...
    />
  );
}

Some examples here

License

Box 3d animate is licensed under the MIT license. (http://opensource.org/licenses/MIT)