Dependency free micro-library to deal with 3D CSS. Demo
Places and manipulates html elements in a 3D space. I know of three.js and I love it, but sometimes I just want to enhance the elements that are already styled with some 3D.
Install it with NPM (npm install 3dcss --save) or Bower (npm install bower --save) or just get the last release.
The only thing you need is to have a "world" or "camera". You can do this by setting the perspective on the element that will contain your 3d objects.
.world {
perspective: 1200px;
}
Every element that will be inside .world can be instantiated with Css3d
<div class='world'>
<div id="threedee"></div>
</div>
<script>
var obj3d = new Css3d(document.getElementById('threedee'));
obj3d.set('position', 20, 40, 50)
.setAttr('rotation', 'z', '-100')
.applyStyle();
</script>
see this example
FAQs
makes it easy to play around with 3d css
The npm package 3dcss receives a total of 12 weekly downloads. As such, 3dcss popularity was classified as not popular.
We found that 3dcss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.