Css изометрический вид с неизометрическими дочерними элементами

Я использую transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);, чтобы элемент выглядел в изометрической перспективе. Мне интересно, как я могу отменить эффект для некоторых детей, чтобы они имели общую систему координации, но нормально выровнены. Я попытался повернуть детей таким же образом назад, но, похоже, это работает по-другому. Есть идеи?

.iso {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;


  position: relative;
  height: 20rem;
  width: 20rem;
  text-align: center;
  margin: 0 auto;
  background-color: tomato;
  box-sizing: border-box;
  padding: 2rem;
}

.marker {
  position: absolute;
  left: 10rem;
  top: 15rem;
  transform: rotateX(-60deg) rotateY(0deg) rotateZ(45deg);
}

<div class = "iso">
  <h3>I'm also iso aligned</h3>

  <div class = "marker">
    <svg xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke = "#FFFFFF" stroke-width = "2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg></div>
</div>

html css css-transforms isometric

07.04.2019 09:44

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

516

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

Ответы 1

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

Вы должны изменить transform-origin, чтобы сделать его внизу, а затем использовать противоположное преобразование, как показано ниже. Вы должны не только инвертировать значения, но и порядок.

Добавлен дополнительный нетрансформированный производитель для сравнения

.iso {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;


  position: relative;
  height: 20rem;
  width: 20rem;
  text-align: center;
  margin: 0 auto;
  background-color: tomato;
  box-sizing: border-box;
  padding: 2rem;
}

.marker {
  position: absolute;
  left: 10rem;
  top: 15rem;
  transform: rotateZ(45deg) rotateY(0deg) rotateX(-60deg);
  transform-origin:bottom center;
}
.compare {
  position:absolute;
  left: 15rem;
  top: 10rem;
}

<div class = "iso">
  <h3>I'm also iso aligned</h3>

  <div class = "marker">
    <svg xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke = "#FFFFFF" stroke-width = "2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg></div>
</div>
<!-- to compare with -->
<svg class = "compare" xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke = "#FFFFFF" stroke-width = "2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg>

Связанные вопросы, чтобы лучше понять важность порядка:

Симуляция преобразования-происхождения с использованием перевода

Почему порядок преобразований имеет значение? Поворот/масштаб SVG не дает того же результата, что и масштаб/поворот

Обратите внимание на этот пример codepen.io/Поли-Д/пен/YzpXBQO. Здесь дочерний объект не сбрасывается правильно после обратного вращения. (сравните форму с обратным вращением и отсутствие вращения в родительском и дочернем состоянии)

— 03.02.2021 13:23

07.04.2019 10:01