/react-3d-rotation-box

a react component, the content in the box will rotate in 3d when mouse moves

Primary LanguageJavaScript

react-3d-rotation-box

A lightweight react component to enable 3d effect rotation for images, logos or other content.

Demo is here: Demo is here

Usage

npm install -S react-3d-rotation-box

import RotationBox from "react-3d-rotation-box";

<RotationBox>
    {/* any content you want to make 3d rotation effect */}
    <img
        src="https://reactjs.org/logo-og.png"
        style={{ width: "100%" }}
    />
</RotationBox>

You can also customize the depth of 3d rotation by modifying these attributes below:

<RotationBox
    minWidth="800px"
    minHeight="400px"
    perspective="300px"
    rotateForce={10}
>
    {/* any content you want to make 3d rotation effect */}
    <img
        src="https://reactjs.org/logo-og.png"
        style={{ width: "100%" }}
    />
</RotationBox>