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

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

8 голосов
/ 01 марта 2012

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

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

Я попробовал предложение "transform: none" из этого вопроса запретить детям наследовать преобразование css3 , но оно просто не работает - пожалуйста, посмотрите здесь:

Ответы [ 3 ]

11 голосов
/ 01 марта 2012

Может быть, вы должны написать так: 

.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/

7 голосов
/ 01 марта 2012

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

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

.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>
2 голосов
/ 08 апреля 2016

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

.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: .5s ease;
            /* transform before hovering */
            transform: rotate(30deg) scale(1.5);
        }

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

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

...