Запретить детям наследовать преобразование поворота в CSS

Я выполняю преобразование CSS: поверните родительский элемент, но хотел бы иметь возможность свести на нет этот эффект для некоторых дочерних элементов - возможно ли это без использования обратного вращения?

Обратное вращение работает, но влияет на положение элемента и может отрицательно сказаться на производительности (?). В любом случае это не выглядит чистым решением.

Я попробовал предложение «преобразовать: нет» из этого вопроса запретить детям наследовать преобразование css3, но это просто не работает - посмотрите скрипку здесь: http://jsfiddle.net/NPC42/XSHmJ/


css css-transforms
person NPC    schedule 01.03.2012    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Я считаю, что вам нужно будет подделать его с помощью второго дочернего элемента, спецификация, похоже, не допускает желаемого поведения, и я могу понять, почему на положение дочернего элемента должно влиять преобразование в его родитель.

Это не самое элегантное решение, но я думаю, что вы пытаетесь сделать то, чего спецификация никогда не позволит. Взгляните на следующую скрипку для моего решения:

.parent {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 70px;
}

.child1 {
  background-color: yellow;
  width: 200px;
  height: 150px;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.child2 {
  position: absolute;
  top: 30px;
  left: 50px;
  background-color: green;
  width: 70px;
  height: 50px;
}
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

person michaelward82    schedule 01.03.2012
comment
Похоже, вы не обновляли скрипт перед тем, как поделиться (он все еще показывает мой код), но я понимаю идею. Спасибо, он не очень чистый, но все же достаточно простой, чтобы он мне понравился :) Если нет лучшего решения, я «приму» этот ответ. - person NPC; 01.03.2012
comment
@ michaelward82 скрипка все еще не обновляется. Обновления меняют URL. - person Fresheyeball; 23.08.2012
comment
Я знаю, что очень опаздываю на вечеринку, но это гениальное решение :-) Пытался воспроизвести gif-файл загрузчика Reddit, наконец-то он заработал. Итак, только первый дочерний элемент наследует trnasforms от своего родителя, если оба дочерних элемента являются div? Имеет ли значение, какой элемент используется (block vc inline)? Кстати, это также работает с ключевыми кадрами. Первый дочерний элемент вообще не нуждается в каких-либо правилах CSS, его можно оставить пустым. Большое спасибо. - person damiano celent; 20.10.2016

arrow_upward
12
arrow_downward

Может, стоит написать вот так:

.child {
    position: absolute;
    top: 30px;
    left: 50px;
    background-color: green;
    width: 70px;
    height: 50px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

Проверьте это, чтобы узнать больше http://jsfiddle.net/XSHmJ/1/

Обновлено:

Для этого вы можете использовать псевдо-класс:after & :before.

проверьте это http://jsfiddle.net/XSHmJ/4/

person sandeep    schedule 01.03.2012
comment
Вот что я имел в виду под обратным вращением. Это делает положение ребенка неочевидным, поэтому я не могу использовать это решение. Тем не менее, спасибо за помощь! - person NPC; 01.03.2012
comment
Мне нравится решение: after, действительно крутое, но оно будет работать только в том случае, если повернутый элемент является очень простым объектом, который можно создать с помощью чистого CSS. Тем не менее, очень хорошая идея, может когда-нибудь пригодиться, спасибо! - person NPC; 01.03.2012
comment
В моем случае используйте полный. Спасибо! - person Zugor; 05.03.2020

arrow_upward
4
arrow_downward

Если вы хотите применить эффекты преобразования к родительскому элементу, не затрагивая его дочерние элементы, вы можете просто анимировать родительский псевдоэлемент следующим образом:

.parent {
  display: inline-block;
  position: relative;
}

.parent::before {
  content: "";
  background: #fab;

  /* positioning / sizing */
  position: absolute;
  left: 0;
  top: 0;

  /* 
        be aware that the parent class have to be "position: relative"
        in order to get the width/height's 100% working for the parent's width/height.                
  */
  width: 100%;
  height: 100%;

  /* z-index is important to get the pseudo element to the background (behind the content of parent)! */
  z-index: -1;
  transition: 0.5s ease;
  /* transform before hovering */
  transform: rotate(30deg) scale(1.5);
}

.parent:hover::before {
  /* transform after hovering */
  transform: rotate(90deg) scale(1);
}

Это действительно сработало для меня. JSFiddle

person jlang    schedule 08.04.2016
comment
Однако вы не вращаете родительский элемент, а только элемент :: before, который по сути является другим дочерним элементом и вообще не влияет на других дочерних элементов. Впрочем, эффект приятный. - person NPC; 09.04.2016