-webkit-transform-style: preserve-3d funktioniert nicht

Ich bin versucht, einen Effekt auf diesen link code_on_jsfiddle . Der Effekt ist, zeigen die Dicke der Münze, während es sich dreht. Code scheint zu funktionieren auf der jsfiddle aber wenn ich versuchte es in meinem codebase es funktioniert einfach nicht. Bitte jemand empfehlen mir verschiedene Szenarien, in denen preserve-3d möglicherweise nicht funktionieren oder kann es da kommen andere Probleme.

Habe ich versucht herauszufinden, was das problem sein kann und ich kam auf link an w3c.org wo steht geschrieben, dass "so erhalten Sie eine Hierarchie der Elemente im 3D-Raum erfordert, dass alle Vorgänger in der Hierarchie der Wert 'preserve-3d" für "transform-style" also ich dachte, dass vielleicht alle meine Vorfahren div vielleicht nicht haben preserve-3d-Stil, aber wenn ich versuchte, zu simulieren eine situation, wo ein Vorfahre ist, noch dass der preserve-3d-Stil, auch als der erforderliche übergang arbeitet link. Verwenden Sie webkit, um zu sehen, den übergang schweben. Bitte helfen Sie

InformationsquelleAutor manyu | 2012-07-26

17

Ich lief in das gleiche problem. preserve-3d scheint nicht zu haben eine Wirkung in bestimmte tief verschachtelten code-Abschnitte. Nach tweaking alle übergeordneten Elemente, ich habe den Schuldigen gefunden!
```
overflow: hidden
```
diese Zeile fasst alles.

Können Sie versuchen, es hier. http://www.webkit.org/blog-files/3d-transforms/transform-style.html
Wenn Sie hinzufügen von overflow: hidden zu der übergeordneten Klasse, der preserve-3d wird aufhören müssen, keine Wirkung.
```
.parent {
    overflow: visible !important;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
```
sollte das problem lösen.

InformationsquelleAutor Max
3

Fand ich, dass ein filter Wirkung auf das übergeordnete element war, die preserve-3d, um ignoriert zu werden.

War ich mit filter: blur() allmählich blur-Elemente, wie Sie gedreht "," Weg vom Betrachter.

Verschieben der filter-das untergeordnete element, das das problem behoben!

InformationsquelleAutor Soft Bullets
0

Versuchen, diese - jsFiddle

Was ich getan habe:
```
.coin {
    background-image: url("http://www.coolemails4u.com/wp-content/uploads/2010/10/indian_rupee.png");
    background-size: 100% 100%;
    border-radius: 100%;
    height: 100px;
    margin: 50px auto;
    position: relative;
    width: 100px;
    -webkit-transition: .5s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* I added this */
}
```
Ich hoffe, das hilft!
- es ist immer noch nicht funktioniert, danke für deine Hilfe trotzdem. Erklären Sie mir die Logik hinter Ihrem Ansatz der setting-webkit-backface-visibility: hidden und, wie Sie dachte, dass es die Dinge richtig machen in meinem Fall
- Sicher. In meinem Fall, bei mir lief dein code in Chrome hintergrund-Bild war immer sichtbar, auch nach der Umstellung (ich sah zwei Münzen), aber basierend auf Ihre Antwort, nun ich denke, Sie hat nicht das gleiche problem haben? Hinzufügen -webkit-backface-visibility: hidden; gelöst wird es für mich. Wenn Sie führen Sie den code in Ihrer Codebasis, was genau nicht funktioniert? Du hast einen wirklich coolen Effekt, so wäre es schön, wenn wir könnten es lösen.
- Ya Sie Ahnen es richtig, ich war nicht vor dem problem u hatte konfrontiert, wenn ich benutze es in meinem code-Basis, die preserve-3d Eigenschaft nicht zu funktionieren scheint das element zu sein schien, abgeflacht, die ganze Zeit. Bitte gehen Sie auf den link in der Frage w3c.org um zu sehen, was Sie geschrieben haben über die preserve-3d-Eigenschaft, ich denke, einige andere Eigentum ist, über das laden dieses preserve-3d-Eigenschaft, aber ich weiß nicht sicher, ob dies das problem ist.
- Ich lese die w3c-post und erhalten Sie zurück zu Ihnen, wenn ich zu einer Lösung zu kommen.
- Wenn ich mir dein erstes Beispiel (code_on_jsfiddle) im Safari funktioniert es, aber in Chrome, wie oben erwähnt, wird das hintergrund-Bild sichtbar ist, die ganze Zeit, aber die rotation ist zu arbeiten. Ich bin mit Chrome 20.0.1132.57 Safari 5.1.7 OS X.
InformationsquelleAutor Christofer Vilander

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.