Verhindern, dass die Kinder Erben drehen, Umwandlung in CSS

Trete ich ein CSS-transform: drehen auf einer übergeordneten, noch möchte in der Lage sein, um diesen Effekt zu annullieren, die auf einigen der Kinder - ist es möglich, ohne mithilfe der reverse rotation?

Reverse rotation funktioniert, aber es wirkt sich auf die position des Elements, und es kann eine negative Auswirkung auf die Leistung (?). In jedem Fall, es sieht nicht nach einer sauberen Lösung.

Habe ich versucht, das "transform: none" Vorschlag aus dieser Frage verhindern, dass die Kinder Erben transformation css3, aber es funktioniert einfach nicht - bitte sehen Sie die Geige hier: http://jsfiddle.net/NPC42/XSHmJ/

InformationsquelleAutor NPC | 2012-03-01

7

Ich glaube, dass Sie gehen zu müssen, um gefälschte es mit einem zweiten Kind, ist die Skillung nicht zu erlauben scheinen für das Verhalten, die Sie möchten, und ich kann verstehen, warum die position, die ein Kind-element beeinflusst werden, indem eine Transformation zu Eltern werden.

Dies ist nicht die elegantesten Lösungen, aber ich denke, dass Sie versuchen, etwas zu tun, dass die Skillung wird nie zulassen. Werfen Sie einen Blick auf die folgenden Geige für meine Lösung:

CSS:
```
.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;
}
```
HTML:
```
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
```
- Es sieht aus wie Sie nicht aktualisieren Sie die Geige vor der Freigabe (es zeigt immer noch mein code), aber ich verstehe die Idee. Danke, es ist nicht sehr sauber, aber immer noch einfach genug für mich, es zu mögen 🙂 Wenn es keine bessere Lösung vorgeschlagen wird, werde ich Sie auf 'übernehmen' diese Antwort.
- Die Geige sollte nun aktualisiert werden
- die Geige ist immer noch nicht aktualisiert. Updates ändern der url.
- Ich weiß ich bin sehr spät zur party hier, aber das ist eine geniale Lösung:-) Versucht zu replizieren, die reddit-loader gif, endlich es funktioniert. So, nur th derste Kind erbt die trnasforms fromt er Elternteil, wenn beide Kinder sind divs? Spielt es eine Rolle, was elelemnt verwendet wird(block vc inline)?BTW, funktioniert das auch mit keyframes.Das erste Kind braucht keine css-Regeln, es kann auch leer gelassen werden.Vielen Dank
InformationsquelleAutor michaelward82
11

Können Sie schreiben, wie diese:
```
.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);
}
```
Überprüfen Sie diese für mehr http://jsfiddle.net/XSHmJ/1/

AKTUALISIERT

Können Sie sue :after & :before Pseudo-Klasse für diese.

überprüfen Sie diese http://jsfiddle.net/XSHmJ/4/
- Dies ist, was ich mit dem rückwärts-rotation. Es macht die position des Kindes nicht sehr offensichtlich, so kann ich nicht wirklich über diese Lösung. Danke für die Hilfe, aber!
- Überprüfen Sie meine aktuelle Geige
- Ich mag das :nach der Lösung, echt cool, funktioniert jedoch nur, wenn das gedrehte element ist ein sehr einfaches Objekt, die "erstellt" durch Reine CSS-Dateien. Noch, eine sehr nette Idee, vielleicht kommen in handliches eines Tages, vielen Dank!
- +1 :nach der Lösung
InformationsquelleAutor sandeep

Wenn Sie sich bewerben möchten transformationsergebnisse auf einen Elternteil, ohne dass seine Kinder, Sie können einfach animieren eines Elternteils pseudo-element wie diesem:

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

Dieser tatsächlich für mich gearbeitet. JSFiddle

Sie sind nicht drehen der Elternteil, obwohl nur ein ::before-element, das ist im Grunde ein anderes Kind und nicht auf andere Kinder. Netter Effekt, aber.

InformationsquelleAutor jlang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.