Главная
Проекты на Vue
Интерактивный конструктор 3D-трансформаций CSS

Интерактивный конструктор 3D-трансформаций CSS

Создание интерактивных интерфейсов стало проще с современными фреймворками, такими как Vue.js. Vue позволяет быстро реализовать динамические компоненты, которые реагируют на действия пользователя без перезагрузки страницы. Представленный ниже компонент — Интерактивный конструктор 3D-трансформаций CSS — наглядно демонстрирует, как легко управлять CSS-свойствами perspective, rotateX, rotateY и rotateZ с помощью реактивных данных Vue.

Этот инструмент — не просто демонстрация, а полноценная песочница для дизайнеров и фронтенд-разработчиков. Он позволяет в режиме реального времени исследовать, как тонкие изменения параметров perspective и вращения влияют на восприятие объекта в пространстве. Благодаря реактивности Vue, каждый ползунок мгновенно обновляет 3D-преобразование, делая процесс изучения CSS-трансформаций интуитивно понятным и наглядным. Вы сразу видите результат своих действий, что идеально подходит для обучения и прототипирования сложных визуальных эффектов.

CSS-свойство transform

perspective: {{perspective}}px;

transform: rotateX({{x}}deg)

transform: rotateY({{y}}deg)

transform: rotateZ({{z}}deg)

<div id="app" class="app">
  <h1 class="app__title">CSS-свойство <span class="orange">transform</span>
  </h1>
  <div class="app__settings">
    <div class="app__settings-sliders">
      <div class="app__settings-slider">
        <label>perspective: {{perspective}}px;</label>
        <input type="range" min="0" max="999" v-model="perspective">
      </div>
      <div class="app__settings-slider">
        <label>transform: rotateX({{x}}deg)</label>
        <input type="range" min="-180" max="180" v-model="x">
      </div>
      <div class="app__settings-slider">
        <label>transform: rotateY({{y}}deg)</label>
        <input type="range" min="-180" max="180" v-model="y">
      </div>
      <div class="app__settings-slider">
        <label>transform: rotateZ({{z}}deg)</label>
        <input type="range" min="-180" max="180" v-model="z">
      </div>
    </div>
    <div class="app__settings-btns">
      <button class="reset" @click.prevent="reset">Сброс</button>
      <button class="copy" @click.prevent="copy()">Скопировать</button>
    </div>
  </div>
  <div class="app__output">
    <div class="app__box" :style="updateBoxStyle"></div>
  </div>
</div>

.orange {
  color: #F39C12;
}
.app {  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 30px;
  width: min(1024px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 50px;
}
.app__title {
  grid-column: 1/-1;
  text-align: center;
}
.app__settings {
  display: grid;
  gap: 30px 0;
}
.app__settings-sliders {
  display: grid;
  gap: 30px 0;
}
.app__settings-slider {
  display: grid;
  justify-items: center;
  gap: 15px 0;
}
.app__settings-slider label {
  text-align: center;
}
.app__settings-slider input {
  width: 50%;
}
.app__settings-btns {
  display: flex;
  justify-content: center;
  gap: 0 20px;
}
.app__settings-btns button {
  padding: 6px 12px;
  font-size: inherit;
  border-radius: 10px;
}
.app__output {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 50px;
  border: 3px dashed #3498DB;
  border-radius: 15px;
}
.app__box {
  --w:250px;
  width: var(--w);
  height: var(--w);
  background-color: #3498DB;
  transform: perspective(500px) rotateX(45deg) rotateY(10deg) rotateZ(0deg);
}
@media (max-width: 680px) {
  .app {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }
  .app__title {
    font-size: 32px;
  }
  .app__settings {
    grid-column: 1;
  }
  .app__settings-slider input {
    width: 100%;
  }
  .app__output {
    grid-column: 1;
    padding-inline: unset;
  }
  .app__box {
    --w:200px;
  }
}

const {createApp,ref,computed} = Vue
createApp({
  setup() {
    const x = ref(0)
    const y = ref(0)
    const z = ref(0)
    const perspective = ref(500)
    const updateBoxStyle = computed(() => {
      return {
        transform: `perspective(${perspective.value}px) rotateX(${x.value}deg) rotateY(${y.value}deg) rotateZ(${z.value}deg)`,
      }
    })
    const reset = () => {
      x.value = 0
      y.value = 0
      z.value = 0
      perspective.value = 500
    }
    const copy = () => {
      let text = `transform: ${updateBoxStyle.value.transform};`
      navigator.clipboard.writeText(text)
    }
    return {x,y,z,perspective,updateBoxStyle,reset,copy}
  }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Разбор кода компонента

Компонент построен на Vue 3 с использованием Composition API. Рассмотрим его логику:

Реактивные данные `ref`

x, y, z — углы вращения по осям (в градусах).
perspective — значение CSS-свойства perspective, определяющее глубину 3D-пространства.

Вычисляемое свойство `computed`

updateBoxStyle — динамически генерирует строку CSS-трансформации на основе текущих значений.

Методы

reset() — сбрасывает все значения к исходным.
copy() — копирует сгенерированное CSS-правило в буфер обмена.

Верстка и стили

Интерфейс адаптирован для мобильных устройств (медиазапрос max-width: 680px).
Используется CSS Grid для расположения элементов.
Поля ввода input[type="range"] привязаны к реактивным переменным через v-model.

Компонент является отличным примером связывания данных Vue с визуальными свойствами CSS, что упрощает создание сложных интерактивных эффектов.

Нужен уникальный интерактивный компонент для вашего сайта?

Мы создаем креативные решения на Javascript, Vue.js и других технологиях. Давайте обсудим ваш проект!

Готовы к сотрудничеству?

Пишите нам, и мы воплотим ваши идеи в современном и функциональном коде.

Предыдущий Следующий