3D трансформация в реальном времени с библиотекой ScrollMe

@zasadadada · Регистрация: 03.05.2013

Студворк — интернет-сервис помощи студентам

На офф. сайте библиотеки в самом низу footer сделан с эффектом 3d трансформации, ни как не могу сделать.
Сам сайт
http://scrollme.nckprsn.com/
Вот его код достал из браузера

HTML5
1
2
3
4
5
6
7
<div class="footer_block animateme" data-when="enter" data-from="1" data-to="0" data-rotatex="90" style="opacity: 1; transform: translate3d(0px, 0px, 0px) rotateX(18.9deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);">
 
            <div class="wrapper">
                               .............
            </div><!-- wrapper -->
 
        </div>

Трансформация идёт через rotateX(), и почему ни где не задаётся преспектива?
Браузер видит не то, что у него в коде как я понял. Если кто знает подскажите как сделать такой эффект на этом плагине.

@mrtoxas · 16.01.2017, 14:35

zasadadada, пробуйте - index.rar
Перспектива в стилях задается.

@zasadadada · 16.01.2017, 15:42 **[ТС]**

Мужчина спасибо, всё работает, там нюанс в том, что css3 верхнего блока должен быть

CSS
1
2
    perspective: 500px;
    transform-style: preserve-3d;

А внутри другой блок...

@mrtoxas · 16.01.2017, 22:04

Именно. perspective задается обертке, а transform-origin и transform - дочернему блоку. Можно все в css добавить:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.footer {
  overflow: hidden;
  perspective: 500px;
  transform-style: preserve-3d;
}
 
.block {
  box-sizing: border-box;
  background-color: #ccc;
  transform-origin: center bottom;
  padding: 100px 50px;
  opacity: 1;
  transform: translate3d(0px, 0px, 0px) 
    rotateX(0deg) 
    rotateY(0deg) 
    rotateZ(0deg) 
    scale3d(1, 1, 1);
}

HTML5
1
2
3
4
5
<div class="footer scrollme">
   <div class="block animateme" data-when="enter" data-from="1" data-to="0" data-rotatex="90">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, iusto quos culpa libero nisi minus nesciunt inventore id maiores tenetur at voluptates non quia aliquam dolore? Aperiam ea ad tenetur!</p>
   </div>
</div>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.01.2017, 14:35
	zasadadada, пробуйте - index.rar Перспектива в стилях задается. 1