Uniemożliwianie dzieciom dziedziczenia transformacji obracania w CSS

Question

Przeprowadzam transformację CSS: obracam nad rodzicem, ale chciałbym móc negować ten efekt na niektórych dzieciach - czy jest to możliwe bez użycia odwrotnego obrotu?

Odwracanie obrotu działa, ale wpływa na pozycję elementu i może mieć negatywny wpływ na wydajność (?). W każdym razie nie wygląda to na czyste rozwiązanie.

Próbowałem „transform: none” sugestię to pytanie prevent children from inheriting transformation css3, ale to po prostu nie działa - proszę zobaczyć na skrzypcach tutaj: http://jsfiddle.net/NPC42/XSHmJ/

Answer 1

wierzę, że będziesz musiał udawać przy użyciu drugiego dziecka, spec nie wydaje się, aby umożliwić zachowanie chciałbyś, i mogę zrozumieć, dlaczego na stanowisko element potomny musi podlegać transformacji do rodzica.

To nie jest najbardziej eleganckie rozwiązanie, ale myślę, że próbujesz zrobić coś, czego specyfikacja nigdy nie pozwoli. Spójrz na poniższej skrzypcach dla mojego rozwiązania:

---

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

Answer 2

może być trzeba napisać tak:

.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); 
} 

Sprawdź to więcej http://jsfiddle.net/XSHmJ/1/

AKTUALIZACJA

można pozwać :after & :before klasa psuedo dla tego.

check to http://jsfiddle.net/XSHmJ/4/

Answer 3

Jeśli chcesz zastosować przekształcenie efektów na rodzica bez wpływu na swoje dzieci, po prostu można animować pseudo- rodzica element taki jak ten:

.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); 
     } 

To faktycznie zadziałało dla mnie. JSFiddle