Это 360-градусный 3D-просмотр плагина для js и CSS3-изображений. Плагин может выполнять 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Основная структура HTML 360-градусного 3D-плагина предварительного просмотра с использованием изображений js и CSS3 выглядит следующим образом.
- <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>
Скопировать код