3dcss 中文文档教程
3dcss
处理 3D CSS 的无依赖微型库。 演示
Why?
在 3D 空间中放置和操作 html 元素。 我知道 three.js 并且我喜欢它，但有时我只是想增强已经使用一些 3D 样式的元素。
Quickstart
Installation
使用 NPM (npm install 3dcss --save) 或 Bower (npm install bower --save) 或只是 获取最新版本。
Usage
您唯一需要的是拥有一个“世界”或“相机”。 您可以通过在将包含 3d 对象的元素上设置 perspective 来做到这一点。
.world {
perspective: 1200px;
}
.world 中的每个元素都可以用 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>
请参阅 例子
3dcss
Dependency free micro-library to deal with 3D CSS. Demo
Why?
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.
Quickstart
Installation
Install it with NPM (npm install 3dcss --save) or Bower (npm install bower --save) or just get the last release.
Usage
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
