@zoot/client-3d v1.0.11
ZooTClient3D
A set of HTML5/CSS3 3D components for WEB and Mobile development.
Check a demo here.
Getting started
Download and install into your project using NPM:
npm install '@zoot/client-3d'
Add the CSS to your HTML page's <head>
:
<head>
<link rel="stylesheet" type="text/css" href="node_modules/@zoot/client-3d/css/zoot_client_3d.css">
</head>
Add 3D components to the document's <body>
:
<body>
<div class="zoot-c3d-container" style="font-size: 180px;">
<div class="zoot-c3d-cube zoot-c3d-anim-spin" style="transform: rotateX(-15deg)">
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>FRONT</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>RIGHT</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>BACK</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>LEFT</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>TOP</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>BOTTOM</h1>
</div>
</div>
</div>
</div>
</body>
Components
Container
Any 3D component should be placed within a Container.
<div class="zoot-c3d-container" style="font-size: 180px">
<!-- Place your 3D components here -->
</div>
Size of the 3D component
The size of the components are internally defined in em
, the overall size of the object can be set by defining the font-size of the container (i.e.: style="font-size: 180px"
).
Cube
Renders a 6 Faces cube within a Container. The Cube's Faces are assigned in the order they are declared:
- FRONT
- RIGHT
- BACK
- LEFT
- TOP
- BOTTOM
Additionally, a shadow plane can be added after all the Faces:
<div class="zoot-c3d-shadow">
</div>
Also, the cube can be rotated, scaled and translated by applying any transform
, i.e.: style="transform: rotateX(-15deg)"
.
<div class="zoot-c3d-container" style="font-size: 180px;">
<div class="zoot-c3d-cube" style="transform: rotateX(-15deg)">
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>FRONT</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>RIGHT</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>BACK</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>LEFT</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>TOP</h1>
</div>
</div>
<div class="zoot-c3d-face zoot-c3d-border">
<div class="zoot-c3d-content">
<h1>BOTTOM</h1>
</div>
</div>
<!-- Optional Cube's Shadow-->
<div class="zoot-c3d-shadow">
</div>
</div>
</div>
Face
This component is used to define the 3D components' faces.
<div class="zoot-c3d-face">
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
Visual modifiers
Wire
Make Faces borders visible.
The class="zoot-c3d-vs-wire"
can be added to any Face or Component (except for Container) to make the wireframe visible.
<div class="zoot-c3d-cube" >
<div class="zoot-c3d-face zoot-c3d-vs-wire">
<!-- The borders of this face will be visible -->
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
<div class="zoot-c3d-face">
<!-- The borders of this face will be hidden -->
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
</div>
<div class="zoot-c3d-cube zoot-c3d-vs-wire" >
<!-- The borders of all the faces will be visible -->
<!-- Place up to 6 Faces here -->
<div class="zoot-c3d-face">
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
</div>
Transparent
Make Faces background fully transparent.
The class="zoot-c3d-vs-transparent"
can be added to any Face or Component (except for Container) to make the faces transparent.
<div class="zoot-c3d-cube" >
<div class="zoot-c3d-face zoot-c3d-vs-transparent">
<!-- The background of this face will be transparent -->
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
<div class="zoot-c3d-face">
<!-- The bacground of this face will be default -->
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
</div>
<div class="zoot-c3d-cube zoot-c3d-vs-transparent" >
<!-- All the faces' backgrounds will be transparent -->
<!-- Place up to 6 Faces here -->
<div class="zoot-c3d-face">
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
<!-- .... -->
</div>
Solid
Make Faces background fully opaque.
The class="zoot-c3d-vs-solid"
can be added to any Face or Component (except for Container) to make the faces opaque.
<div class="zoot-c3d-cube" >
<div class="zoot-c3d-face zoot-c3d-vs-solid">
<!-- The background of this face will be opaque -->
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
<div class="zoot-c3d-face">
<!-- The bacground of this face will be default -->
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
</div>
<div class="zoot-c3d-cube zoot-c3d-vs-solid" >
<!-- All the faces' backgrounds will be opaque -->
<!-- Place up to 6 Faces here -->
<div class="zoot-c3d-face">
<div class="zoot-c3d-content">
<!-- Put anything here... -->
</div>
</div>
<!-- .... -->
</div>
Animations
Animations modifiers can be applied to components as addiotional classes.
Spin
Adds an spin animation to the 3D component by adding the CSS class .zoot-c3d-anim-spin
. Can be applied to any Component.
<div class="zoot-c3d-cube zoot-c3d-anim-spin zoot-c3d-anim-invert" >
<!-- Place up to 6 Faces here -->
</div>
CubeExplode
Adds an explode animation to the Cube by adding the CSS class .zoot-c3d-anim-cubeexplode
. Can be applied to Cube and can be used in combination with Spin and Invert.
<div class="zoot-c3d-cube zoot-c3d-anim-spin zoot-c3d-anim-cubeexplode" >
<!-- Place up to 6 Faces here -->
</div>
Invert
Reverses the animation direction by adding the CSS class .zoot-c3d-anim-invert
. Can be applied to any animation.
<div class="zoot-c3d-cube zoot-c3d-anim-spin zoot-c3d-anim-invert" >
<!-- Place up to 6 Faces here -->
</div>
Authors
- Hernan Perrone - @hperrone See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE file for details.