Предотвратяване на деца от наследяване на ротационна трансформация в CSS

Извършвам CSS трансформация: завъртане на родител, но бих искал да мога да отхвърля този ефект върху някои от децата - възможно ли е без използване на обратното завъртане?

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

Опитах предложението „transform: none“ от този въпрос предотвратяване на деца от наследяване на трансформация 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 loader, най-накрая го накарах да работи. И така, само първото дете наследява trnasforms от родителя, ако и двете деца са divs? Има ли значение какъв елемент се използва (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 psuedo клас за това.

проверете това 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
Използвайте full в моя случай. Благодаря ти! - 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