https://github.com/jerosoler/3dbox

🎨 CSS Houdini 3D Box
https://github.com/jerosoler/3dbox

3d css css-houdini csshoudini houdini paintworklet

Last synced: about 1 year ago
JSON representation

🎨 CSS Houdini 3D Box

• Host: GitHub
• URL: https://github.com/jerosoler/3dbox
• Owner: jerosoler
• License: mit
• Created: 2021-02-21T17:23:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-02-21T17:28:28.000Z (over 5 years ago)
• Last Synced: 2024-04-14T13:51:56.240Z (about 2 years ago)
• Topics: 3d, css, css-houdini, csshoudini, houdini, paintworklet
• Language: HTML
• Homepage: https://jerosoler.github.io/3dbox/
• Size: 16.6 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![GitHub license](https://img.shields.io/github/license/jerosoler/3dbox)](https://github.com/jerosoler/3dbox/blob/main/LICENSE)

[PLAY](https://jerosoler.github.io/3dbox/)

![Demo](https://github.com/jerosoler/3dbox/raw/master/docs/3dbox.png)

## CDN

```html

```

## NPM 

```bash

npm install threedbox

```

## How to use

Download `THREEDBox.js` file.

### Javascript:

```javascript

if ('paintWorklet' in CSS && 'registerProperty' in CSS && 'CSSUnitValue' in window) {

    CSS.registerProperty({

        name: '--threedbox-angle-vertical',

        syntax: '',

        initialValue: '10px',

        inherits: false

    });

    CSS.registerProperty({

        name: '--threedbox-angle-horitzontal',

        syntax: '',

        initialValue: '10px',

        inherits: false

    });

    CSS.registerProperty({

        name: '--threedbox-padding',

        syntax: '',

        initialValue: '50px',

        inherits: false

    });

    CSS.registerProperty({

        name: '--threedbox-color',

        syntax: '',

        initialValue: '#ffffff',

        inherits: false

    });

    CSS.registerProperty({

        name: '--threedbox-color-back',

        syntax: '',

        initialValue: '#ffffff',

        inherits: false

    });

    CSS.registerProperty({

        name: '--threedbox-color-border',

        syntax: '',

        initialValue: '#ffffff',

        inherits: false

    });

    CSS.paintWorklet.addModule('THREEDBox.js');

} else {

    console.log("Not Supported");

    alert("Not Supported");

}

```

### CSS 

```css

div {

    padding: 50px;

    --threedbox-color: #ff7d64;

    --threedbox-color-back: #a32107;

    --threedbox-color-border: #ff0000;

    --threedbox-angle-vertical: 15px;

    --threedbox-angle-horitzontal: -15px;

    --threedbox-padding: 50px;

    background-image: paint(threedbox);

}

```