[Picture Effects] Просмотр на 360 градусов

[Скопировать ссылку]
admin Опубликовано 19-11-2018 15:26:36 | Показать все сообщения |Режим чтения Печать Назад Вперед
3D просмотр изображения на 360 градусов

Краткое описание

Это 360-градусный 3D-просмотр плагина для js и CSS3-изображений. Плагин может выполнять 3D-поворот на изображении для достижения эффекта просмотра сцены в стереоскопическом пространстве.

Совместимость
Поделиться:


Краткое руководство
Это 360-градусный 3D-просмотр плагина для js и CSS3-изображений. Плагин может выполнять 3D-поворот на изображении для достижения эффекта просмотра сцены в стереоскопическом пространстве.
Как использовать
Представьте следующие js и CSS-файлы на странице.
  1. <link rel="stylesheet" href="css/app.css" />
  2. <link rel="stylesheet" href="css/cube.css" />
  3. <link rel="stylesheet" href="css/axes.css" />
  4. <link rel="stylesheet" href="css/controls.css" />
  5. <script src="js/controls.js"></script>
  6. <script src="js/rotate.js"></script>
Скопировать код

HTML
Основная структура HTML 360-градусного 3D-плагина предварительного просмотра с использованием изображений js и CSS3 выглядит следующим образом.
  1. <div class="perspective drag-area">
  2.   <div class="camera">
  3.     <div class="rotate">
  4.       <div class="cube">
  5.         <div class="side front">
  6.           <div class="side left">
  7.             <div class="side top"></div>
  8.             <div class="side bottom"></div>
  9.             <div class="side back">
  10.               <div class="side right">
  11.               </div>
  12.             </div>
  13.           </div>
  14.         </div>
  15.       </div>
  16.     </div>
  17.   </div>
  18. </div>
  19. <div class="axes">
  20.   <div class="rotate">
  21.     <div class="axis main-axis red-axis">
  22.       <div class="axis perpendicular-axis red-axis"></div>
  23.     </div>
  24.     <div class="axis main-axis green-axis">
  25.       <div class="axis perpendicular-axis green-axis"></div>
  26.     </div>
  27.     <div class="axis main-axis blue-axis">
  28.       <div class="axis perpendicular-axis blue-axis"></div>
  29.     </div>
  30.   </div>
  31. </div>
  32. <div class="controls">
  33.   <img class="input-show-borders" src="images/cube.svg">
  34.   <img class="input-show-grid" src="images/globe.svg">
  35.   <div class="zoom">
  36.     <input class="input-zoom" type="range" min="-800" max="800" value="800">
  37.   </div>
  38. </div>
Скопировать код



Сообщение слишком большое

Для просмотра Вам необходимо авторизироваться.
Если Вы еще не зарегистрированы, перейдите по ссылке: Регистрация.

x
Ответить

Магия Жалоба

Чтобы ответить, вам надо авторизироваться в системе Вход | Регистрация

Правила начислений  Разрешить ответные письма, чтобы напомнить автору

Сектор творческих людей
Горячая линия

638638758

С понедельника по воскресенье с 9:00 до 23:00

Обратной связь

admin@artace.ru Онлайн

QR-код

Powered by Discuz! X3.4© 2001-2018 Comsenz Inc.