Tag: css-transforms
CSS-Transformationen Elemente gestylt mit CSS umgewandelt werden in zwei-dimensionalen oder drei-dimensionalen Raum
merkwürdige CSS-webkit-transform-scale-schweben in Chrom
2 Antworten
Ich bin sehr neu zu codieren, sondern erlebt auf dem computer. Auf der folgenden website ich bin momentan dabei, ein vergrößern-on-hover-Effekt, geschrieben in css allein. LINK: http://3514.linux3.testsider.dk/da/produkter/skumdetektorer Wenn Sie einen Blick in Chrome am 1., 4., 5.,
transform3d(): Mithilfe Prozentsatz zum Bewegen Innerhalb des Übergeordneten Objekts
4 Antworten
CSS-standard-Verhalten beim verschieben eines Objekts in Prozent, dass dieser Prozentsatz stellt die Abmessungen des übergeordneten Containers (div). Dies gilt nicht, wenn mit CSS3 transform: translate3d(). Wenn Sie mit prozentualen Werte für entweder die X -, Y-oder Z-Koordinate,
Wie man Objekte verschieben, mit CSS?
2 Antworten
Habe ich zwei Bilder (Objekte) legen Sie nebeneinander in der Mitte der Seite und ich möchte, dass Sie sich zu bewegen in Richtung zueinander, als ob Sie gehen, um zu kollidieren und zu stoppen, als Sie neben
Transform CSS-Eigenschaft funktioniert nicht mit <a> - element
2 Antworten
Möchte ich scale(x,y) meine <a> element, wenn ich drauf klicke, aber es funktioniert nicht. Ich benutze Mozilla Firefox web-browser, um das Programm auszuführen. Hier ist mein code: scaleElement.html <html> <head> <title>CSS3 Transform and Transition</title> <style> a{ background-color:
transform: rotate erstellen Sie unerwünschte Leerzeichen
3 Antworten
Ich habe eine Seite, die verwendet transform: rotate, aber lässt einen großen Leerraum, wobei das element gewesen wäre, wäre es nicht gedreht. Ich habe gefunden ein paar andere Leute fragt eine ähnliche Frage, aber ich habe nicht
Verschwommen text auf Chrome bei der Verwendung von CSS -webkit-transform
2 Antworten
Ich bin mit -webkit-transform: skew(-15deg, 0deg); skew ein div, und dann -webkit-transform: skew(15deg, 0deg); zu Schräglagenkorrektur den text-mit Kind. Die Neigung sieht hässlich und pixlated in google chrome, so dass ich mit -webkit-backface-visibility: hidden; machen es OK
CSS3 animation, zu übersetzen, zu positionieren
3 Antworten
Ich habe ein div, dass ich auf, um Sie zu ziehen. Sobald es auf einen Bereich, animiert, seine position über: $("#wheel1").animate({left: "200px", top: "100px"}); Kann ich die auch bekommen es zu animieren mit: @-webkit-keyframes wheel1 { 0%
Verhindern, dass die Kinder Erben drehen, Umwandlung in CSS
3 Antworten
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
Wie kann ich CSS3-transform auf eine Spanne?
2 Antworten
Ich habe eine inline-element (a <span>) verschachtelt in einem <h1> tag. Ich bewarb mich eine transform-Eigenschaft der h1 ( skew so sieht es aus wie ein Parallelogramm). Ich muss Transformation der span-tag zu "unskew" und seinem text.
Css-Animation funktioniert nicht in Google Chrome
1 Antworten
Ich versuche, mit diese loader in meine web-site scc-animation funktioniert gut in Firefox & IE aber nicht in Google Chrome. #loader{ width: 820px; height: 670px; border: none; overflow: hidden; margin: 0px 70px; background: #0d8aa5; position: relative; }
Warum übergänge für einige CSS-Eigenschaften sind langsam, und keiner fließend
2 Antworten
Verbrachte ich in einem Kampf von 4 Stunden auf eine einfache transition mit einem akzeptablen Leistung: Zuerst habe ich versucht diesen code : left: 2000px; -webkit-transition: left 1s linear; -moz-transition: left 1s linear; -ms-transition: left 1s linear;
CSS3 animation funktioniert nicht im IE9
1 Antworten
CSS3-Animationen funktioniert nicht im IE9. Hier ist die jfiddle link. Ist es möglich, Sie in IE oder ich mache einige dumme Fehler? Hier ist der code, der nicht funktioniert: @-ms-keyframes rotating { 0% { -ms-transform: rotate(0deg); }
Warum tut "-webkit-transform-style: preserve-3d;" machen Sie einige divs verschwinden?
2 Antworten
Sollte der folgende code zeigt eine Kopfzeile, eine Fußzeile, eine bar, und ein Bild, aber aus irgendeinem Grund, sobald ich hinzufügen .div1 { -webkit-transform-style: preserve-3d; } ich nur die header-bar. Ich weiß, es scheint, haben einige unnötige
Hover-Effekt : erweitern Unterste Grenze
7 Antworten
Ich versuche, einen übergang hover-Effekt auf der Grenze, dass die Grenze erweitert auf hover. CSS: h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ''; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition:
CSS3-transform-rotate text, fixed-position Links und rechts, vertikal zentriert
2 Antworten
Ich versuche, die position eines Elements auf der linken und auf der rechten Seite des browser-Fensters, die beide enthält eine ul mit CSS transform rotate. Ich habe es geschafft, die position .rotate-left und seine ul auf der
Spin oder drehen Sie ein Bild auf hover
4 Antworten
Ich soll herausfinden, wie man eine drehenden oder rotierenden Bild, wenn es schwebte. Ich würde gerne wissen, wie zu emulieren, die Funktionalität mit CSS auf den folgenden code : CSS: img { border-radius: 50%; } HTML: <img
Drehen Sie 45-Grad-Elements um die vertikale Achse
3 Antworten
Habe ich eine Reihe von Elementen, wie im Bild unten gezeigt: Sind Sie um 45 Grad gedreht auf einer Seite (der Inhalt innerhalb -45 Grad, bleiben aufrecht). Nun möchte ich zu drehen jedes element um eine vertikale
Position fixed funktioniert nicht mit der CSS-Eigenschaft transform
1 Antworten
Gibt es einen Weg, um den "Hallo" - element befestigt? So dass, wenn ein Benutzer führt einen Bildlauf nach oben oder unten, Hallo-element bewegt sich nicht aus seiner position. Hier ist das Beispiel: http://jsfiddle.net/VR5P8/ Hier ist der
Gedrehte Elemente in CSS, die Einfluss auf Ihre Eltern in der Höhe korrekt
3 Antworten
Sagen wir, ich habe ein paar Spalten, von denen einige ich möchte drehen die Werte von: http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div> Mit diesem CSS: .statusColumn b { writing-mode: tb-rl; white-space:
CSS-Seite-Flipping-Effekt
1 Antworten
Ich Baue eine web-Anwendung, mit Wirkung ähnlich wie FlipBoard. Zuerst, ich versuchte zu verwenden diese open-source. Aber ich weiß nicht wirklich wie die Art, wie es umgesetzt werden (Duplikate erstellen für jede Seite und überlappen einander beim
Halten, Bild original-Größe innerhalb kleiner div
3 Antworten
Habe ich ein Bild, das 600x400px, und will es in eine kleinere div-Größe 240x200px, aber das Bild verkleinert oder verzerrt wird. Ich will die original Größe Bild zentriert in den kleineren div, das würde einige ausblenden des
Bootstrap-flip-Karte mit css3 transform
1 Antworten
Möchte ich erstellen eine bootstrap-flip-Karte durch die Verwendung von CSS3-transform. Ich habe begonnen, von dieser Arbeits-und basic-Beispiel Aber ich wollte es ändern, um eine Feste Höhe-Karte und einige kleinere Verbesserung. Insbesondere brauchte ich, um die Karten flip,
CSS Transform funktioniert nicht im IE 8
1 Antworten
Ich bin versucht zu drehen oder transformieren ein div mit der CSS-Eigenschaft Transform. Hier ist meine Transformation von CSS-Code: -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); transform: rotate(270deg); Der obige code funktioniert Super in
Skew div-Grenze von nur einer Seite mit einem div nur
1 Antworten
Habe ich eine schiefe div mit folgenden css - #outer-left{ -ms-transform: skew(-30deg,0deg); /* IE 9 */ -webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */ transform: skew(-30deg,0deg); background:#333333; width:200px; z-index:20; border-bottom:3px solid #2E8DEF; padding:10px 30px 10px 75px; font-size:20px; color:#2E8DEF; position:relative;
Machen CSS3-Dreieck mit linearen Farbverlauf
4 Antworten
Muss ich erstellen, die Schaltfläche mit dem Dreieck auf der einen Seite (wie diese http://css-tricks.com/triangle-breadcrumbs/) mit linear vertikaler Farbverlauf und Grenze, und ich will reines CSS3. Es ist ok, wenn ich muss 45deg "Dreieck", ich Schreibe einfach
Wie, um eine genaue Einstellung einer dynamischen Stil verwandeln mit Javascript?
2 Antworten
Ich weiß, die Methode der Einstellung verwandeln, aber ich will einstellen, das drehen und zu halten, andere, wie etwa skalieren und neigen. Vielleicht können wir eine Funktion schreiben als: //A variable of element, not parameter. separate out
Rückseite-Sichtbarkeit nicht funktioniert in IE10 - funktioniert in webkit
5 Antworten
Baue ich eine einfache pure-css "- flip " Animationen, es hat arbeiten in IE10, doch leider ist das, was ich geschrieben habe nicht. jsFiddle demo hier oder Beispiel-html zip hier Kann ich sehen, dass die Rückseite der
Ist es polyfill für die css-Eigenschaft transform in IE8
1 Antworten
Habe ich Folgendes mixin für cross-browser-transform: .transform (...) { -webkit-transform: @arguments; /* Chrome, Opera 15+, Safari 3.1+ */ -moz-transform: @arguments; /* Firefox 3.5+ */ -ms-transform: @arguments; /* IE 9 */ -o-transform: @arguments; /* Opera 10.5+ */ transform:
CSS transform ist nicht in der Kante
3 Antworten
Komme ich nicht weiter bei folgendem problem. Auf diese Website, die ich erstellt, ich habe eine Galerie, welche sich am unteren Rand der Seite. Wenn ich den Mauszeiger über den Daumen, Sie Fliegen herum wie verrückt, das
Tut IE11 Unterstützung von css-3d-Transformationen vollständig (preserve-3d)
2 Antworten
Ich mache eine css-3d-Transformationen, web-app, und ich möchte IE11 unterstützt werden, wenn möglich. Ich weiß, IE10 nicht unterstützt preserve-3d Wert für die transform-style css-Attribut, aber ich bin mir nicht sicher über den IE11. Ich habe einige Sachen,
CSS3-3D-Transformation funktioniert nicht auf IE11
1 Antworten
Ich versuche, erstellen Sie einen cube mit CSS3 3D-Transform.. Für dieses Beispiel habe ich nur 2 Gesichter : <section id="header-cube-container"> <div id="header-cube"> <figure></figure> <figure></figure> </div> </section> Mit jedem anderen browser erhalte ich ein gutes Ergebnis, aber es
CSS-keyframe-animation mit der übersetzung Transformation rastet ganzen Pixel im IE 10 und Firefox
3 Antworten
Erscheint es sowohl in IE 10 und Firefox schnappt Elemente auf ganze Pixel bei der Animation Ihre position mit übersetzen 2d-Transformation in ein css-keyframe-animation. Chrome und Safari nicht, das sieht viel besser beim animieren subtilen Bewegungen. Die
Wie reibungslos animieren Höhe in CSS oder Javascript auf mobilen Geräten
2 Antworten
Ich bin die Entwicklung einer HTML5 web Applikation für mobile Geräte und lief in ein wenig Mühe mit glatten Animationen. Im wesentlichen, wenn ein Benutzer auf eine Schaltfläche tippt, eine Schublade (div mit height: 0px) sollte animieren
Ist es möglich, verschiedene Dauer/delay für transform-Optionen?
3 Antworten
Möchte ich mehrere transformationsoptionen für meine html-Objekt, jedoch mit unterschiedlicher Dauer und Verzögerung. Wenn ich versuche, so etwas wie, dass: -webkit-transition: -webkit-transform, opacity; -webkit-transform: rotate(180deg) scale(2); -webkit-transition-duration: 2000ms, 6000ms; -webkit-transition-delay: 0ms, 6000ms; Dann habe ich verschiedene Zeit-Funktion
100% Höhe block mit vertikalen text
4 Antworten
Ich habe einen block mit einer Variablen Höhe, die ich setzen will, einen anderen block mit 100% Höhe und vertikalen text (oben-unten-Richtung) und legen Sie es auf der linken Seite des äußeren block. Gibt es eine Möglichkeit,
CSS3-Transform wirkt sich auf andere Elemente mit chrome/safari
4 Antworten
Ich habe ein Problem, wo mein css3-Transformationen bewirken andere Elemente auf der Seite und auch wodurch Sie mit einer Art flackern. Ich sah noch einen post über diesem, aber Sie haben nicht eine resolution mit dem Thema.
Wie drehen + kippen-element mit CSS
4 Antworten
Transform-Eigenschaft können Sie ein Bild drehen oder spiegeln, aber wie kann man beides gleichzeitig? Sagen, ich will das drehen eines Elements um 90 Grad und horizontal zu spiegeln? Beide sind fertig mit derselben Eigenschaft, so ist die
Mit CSS-transform: translate(...) mit ReactJS
2 Antworten
Laut https://facebook.github.io/react/tips/inline-styles.html CSS-Stile werden müssen, geht als ein Objekt der Komponente. Jedoch, wenn Sie versuchen, verwenden, verwandeln, Stile, erhalten Sie eine Fehlermeldung. Könntest du ein code-Beispiel und Fehlermeldung? InformationsquelleAutor Guy Laor | 2015-09-17
transform:translateX-vs Umstellung auf Links-Eigenschaft. Was hat bessere Leistung? CSS
2 Antworten
Mache ich ein slide-out Menü mit HTML und CSS3, insbesondere übergänge. Ich würde gerne wissen, was ist beste Praxis /beste Leistung zu schieben einen relativ positionierten div-horizontal. Wenn ich auf eine Schaltfläche klicken, fügt es eine Klasse,
Überlauf-Verhalten nach der Verwendung von CSS3-transform
3 Antworten
Bitte überprüfen Sie die demo Habe ich zwei divs die ersten div ist für die Anzeige der scroll-Leiste und die zweite div wird verwendet für die rotation der innere Inhalt des div. Meine Frage ist, warum scroll-Balken
CSS3-Transformationen und-übergänge (Webkit)
1 Antworten
Betrachten Sie die folgenden fiddle p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: transform 1s ease-in; -moz-transition: transform 1s ease-in; -o-transition: transform 1s ease-in; transition: transform 1s
Erkennen mit JavaScript oder jQuery-CSS-Transformation 2D verfügbar ist
5 Antworten
Ich bin anzeigen ein element auf meiner Website, die ich drehen -90Grad aber wenn ein browser nicht unterstützt, ist die CSS-Transformation das element sieht misspositioned und nicht wirklich gut. Nun möchte ich erkennen, die mit JavaScript oder
Die Kombination mehrerer "transform" - Einträge in Weniger
4 Antworten
Habe ich zwei Mixins in Verbindung, die sowohl zu konvertieren -webkit-transform: .rotate(@deg) { -webkit-transform: rotate(@deg); } .scale(@factor) { -webkit-transform: scale(@factor); } Wenn ich mit Ihnen zusammen: div { .rotate(15deg); .scale(2); } ... Sie (wie erwartet) als: div
CSS transform auf SVG-Elemente IE9+
2 Antworten
Nachdem ein SVG-Path: <path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/> Habe ich versucht, um es zu transformieren von CSS anstelle von Deklaration der transform - Attribut aus dem "element-tag". Dieser Prozess funktioniert von webkit und firefox, jedoch wenn
CSS3-Transform verursacht, text flackern in Safari und Firefox Mac Yosemite
7 Antworten
Ich habe dieses seltsame Problem auf Safari und Firefox (Mac/Yosemite), die bewirkt, dass fast alle der text auf der Seite an zu flackern, wenn die Maus über das element verwandeln. Beispiel gif: (Firefox, Yosemite) .usp { //USP
CSS-Transformieren-verzerren die Form eines Trapezes
2 Antworten
Ich möchte in der Lage sein zu verzerren eines Elements in der Art, wie das Bild unten zeigt. Ich habe gespielt, um mit ihm, aber dont zu sein scheinen in der Lage zu bekommen in der Nähe
Gewusst wie: zurücksetzen von CSS3 *-transform: translate(...)?
2 Antworten
Wie soll ich den reset-CSS-Transformationen, die zuvor angewendet? Sagen ich haben: div.someclass { -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate(0, -50%); -ms-transform: translate(0,- 50%); -o-transform: translate(0, -50%); transform: translate3d(0, -50%, 0); } Dann, wie lösche ich alle Transformationen/übersetzungen?
CSS transformiert VS-Übergänge
1 Antworten
Was sind die wichtigsten Unterschiede zwischen CSS-Transformationen und-übergänge? Beide verwendet werden zum ändern der aktuellen Form/Zustand eines Objekts. (Sie können den hübschen Animationen mit JS etc..) Aber es ist immer noch nicht klar für mich, die Sie
translate3d vs übersetzen Leistung
3 Antworten
Wir jetzt alle wissen, besonders von schönes Artikel,, wir sollten lieber css-Transformationen animieren position. Aber wir haben die Wahl zwischen translate() und translate3d()... Welches ist in der Regel schneller? InformationsquelleAutor der Frage abernier | 2014-03-01
Wie kann verhindert werden, dass sich das Webkit-Text-Rendering während des CSS-Übergangs ändert?
9 Antworten
Ich bin mit CSS-übergänge, um den übergang zwischen CSS umgewandelt Staaten (die im Grunde den übergang in der Größe eines Elements). Ich merke, dass, wenn das element den übergang, den rest des Textes auf der Seite (Webkit)
- 1
- 2