图片/图形
图片360度全方位3D预览插件
PetitQ
这是一款 js 和 CSS3 图片 360 度全方位 3D 预览插件。该插件可以对一张图片进行 3D 旋转，实现类似在立体空间中查看景物的效果。
使用方法
在页面中引入下面的 js 和 CSS 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/cube.css" />
<link rel="stylesheet" href="css/axes.css" />
<link rel="stylesheet" href="css/controls.css" />
<script src="js/controls.js"></script>
<script src="js/rotate.js"></script>
HTML 部分
使用该 js 和 CSS3 图片 360 度全方位 3D 预览插件的基本 HTML 结构如下。
<div class="perspective drag-area">
<div class="camera">
<div class="rotate">
<div class="cube">
<div class="side front">
<div class="side left">
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side back">
<div class="side right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="axes">
<div class="rotate">
<div class="axis main-axis red-axis">
<div class="axis perpendicular-axis red-axis"></div>
</div>
<div class="axis main-axis green-axis">
<div class="axis perpendicular-axis green-axis"></div>
</div>
<div class="axis main-axis blue-axis">
<div class="axis perpendicular-axis blue-axis"></div>
</div>
</div>
</div>
<div class="controls">
<img class="input-show-borders" src="images/cube.svg">
<img class="input-show-grid" src="images/globe.svg">
<div class="zoom">
<input class="input-zoom" type="range" min="-800" max="800" value="800">
</div>
</div>
该 js 和 CSS3 图片 360 度全方位 3D 预览插件的 github 地址为：https://github.com/angelolucas/360-view
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
