Html и CSS, проблема с добавлением текста на поверхности куба и смещением его тени и самого себя

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 100px;
}

body {
  min-width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  perspective: 20em;
  perspective-origin: 77px 100px;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: animate 15s linear infinite;
}

@keyframes animate {
  to {
    transform: rotateY(360deg);
  }
}

.shadow {
  position: absolute;
  background: aqua;
  width: 2em;
  height: 2em;
  transform: translateZ(-130px) rotateX(90deg) rotateZ(3deg);
  bottom: 0em;
  left: 4em;
  box-shadow: 0 120px 100px 10px blue, 50px 120px 200px 10px blue;
  filter: blur(100px);
}

.top,
.bottom,
.left,
.right,
.front,
.back {
  height: 2em;
  width: 2em;
  background: aqua;
  position: absolute;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 50px 10px blue inset, 0 0 0 2em aqua inset;
}

.front {
  transform: translateZ(1em);
}

.back {
  transform: translateZ(-1em);
}

.top {
  transform: translateY(-1em) rotateX(90deg);
}

.bottom {
  transform: translateY(1em) rotateX(90deg);
}

.right {
  transform: translateX(1em) rotateY(90deg);
}

.left {
  transform: translateX(-1em) rotateY(90deg);
}

<body>
  <div class = "cube">
    <div class = "top"> </div>
    <div class = "bottom"> </div>
    <div class = "left"> </div>
    <div class = "right"> </div>
    <div class = "front"> </div>
    <div class = "back"> </div>
  </div>

  <div class = "shadow">
  </div>
</body>

Проблемы:

Я хочу добавить разные тексты на поверхности (1-я, 2-я, 3-я, 4-я) куба (приветствие) (на) (основная) (страница)
К тому же тень под кубом не по центру. Как я могу центрировать его?
Наконец, я также не мог переместить куб на более высокую позицию. Как я могу решить эти проблемы?

Визуал ниже:

Проверьте мой ответ, я считаю, что я выполнил все ваши пункты.

— 27.11.2022 17:05

javascript html css

27.11.2022 14:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы «переместить» куб, ваш div должен иметь пропорции. Я вставил width: 2em; и height: calc(2em + 20px); на ваш кубик. Я добавил 20 пикселей по высоте из-за тени, вы можете показать, что она «парит».

Чтобы центрировать тень, вам нужно использовать left: 50%;, а также сначала добавить transformtranslateX(-50%). Это позволит центрировать его по оси X независимо от размера экрана, и, поскольку вы используете flex, было бы хорошо работать все вместе. Чтобы сделать его отзывчивым снизу, я использовал bottom: calc(50% - 2em - 20px); (2em — высота вашего куба и 20px — поплавок).

Для текста оберните его внутри <span>, затем отцентрируйте его с помощью CSS и используйте transform: rotateY(180deg);, чтобы перевернуть текст перевернутого divs. Я также изменил анимацию вращения, чтобы она соответствовала желаемому шаблону.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 100px;
}

body {
  min-width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  perspective: 20em;
  perspective-origin: 77px 100px;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: animate 15s linear infinite;
  height: calc(2em + 20px);
  width: 2em;
}

@keyframes animate {
  to {
    transform: rotateY(-360deg);
  }
}

.shadow {
  position: absolute;
  background: aqua;
  width: 2em;
  height: 2em;
  transform: translateX(-50%) translateZ(-130px) rotateX(90deg) rotateZ(3deg);
  bottom: calc(50% - 2em - 20px);
  left: 50%;
  box-shadow: 0 120px 100px 10px blue, 50px 120px 200px 10px blue;
  filter: blur(100px);
}

.top,
.bottom,
.left,
.right,
.front,
.back {
  height: 2em;
  width: 2em;
  background: aqua;
  position: absolute;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 50px 10px blue inset, 0 0 0 2em aqua inset;
}

.front {
  transform: translateZ(1em);
}

.back {
  transform: translateZ(-1em);
}

.top {
  transform: translateY(-1em) rotateX(90deg);
}

.bottom {
  transform: translateY(1em) rotateX(90deg);
}

.right {
  transform: translateX(1em) rotateY(90deg);
}

.left {
  transform: translateX(-1em) rotateY(90deg);
}

.right>span,
.front>span,
.left>span,
.back>span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5rem;
}

.left>span,
.back>span {
  transform: translate(-50%, -50%) rotateY(180deg);
}

<body>
  <div class = "cube">
    <div class = "top"> </div>
    <div class = "bottom"> </div>
    <div class = "left">
      <span>page</span>
    </div>
    <div class = "right">
      <span>to</span>
    </div>
    <div class = "front">
      <span>welcome</span>
    </div>
    <div class = "back">
      <span>main</span>
    </div>
  </div>
  <div class = "shadow">
  </div>
</body>

27.11.2022 16:48

Другие вопросы по теме

ASP.NET Core — изменить действие формы, чтобы просмотреть доступные параметры

Мне нужно передать имя из формы ввода в моем файле ejs и обработать его в моем почтовом запросе

Изменить цвет шрифта с помощью js

Как повлиять на все теги h2 внутри определенного идентификатора div и с внутренними div

ASP.NET Core 2.0 устанавливает фокус на элемент ввода

Веб-очистка определенного тега td из таблицы с помощью python

Подпись к фотографии не совпадает с фотографией (html, CSS)

Я получаю сообщение об ошибке при попытке прочитать текст из файла в reactjs/tauri

Поля/отступы вокруг контента в новом приложении Vue

HTML внутри пользовательского интерфейса материала Аккордеон

Html и CSS, проблема с добавлением текста на поверхности куба и смещением его тени и самого себя

Ответы 1

Другие вопросы по теме

Похожие вопросы