CSS transformieren px Größe div zu 100vw/100vh

Ich habe ein div in Pixel, und zentriert auf dem Bildschirm mit dem top/left + transform Trick. Ich habe eine CSS-Animation erstellt, um dieses Feld zu animieren, um den gesamten Bildschirm zu füllen, aber da es auf height/width basiert, ist die Framerate schrecklich.CSS transformieren px Größe div zu 100vw/100vh

Hier ist eine Demo von dem, was ich erreicht habe. Während die Framerate in der Geige ordentlich genug ist, ist die Framerate in meinem tatsächlichen Anwendungsfall mit vielen anderen Elementen auf der Seite schrecklich.

https://jsfiddle.net/ozxyfuje/

Ich mag diese transform zu verwenden, um konvertieren, aber ich bin nicht sicher, wie es zu gehen, vor allem die transform bedenkt, die schon da ist es zu zentrieren.

Ich versuchte calc() zu verwenden, um den Skalierungsfaktor von den Dimensionen des div, um herauszufinden, und das Bildfenster, aber anscheinend vw und vh sind nicht mit calc() kompatibel.

Im Idealfall möchte ich JavaScript vermeiden, aber ich kann eine JavaScript-basierte Lösung als letzten Ausweg akzeptieren.

Quelle

2017-01-02 Emphram Stavanger

versuchen Sie transformieren-style: preserve-3d; – slashsharp

Sie können mehrere Werte, die durch ein Leerzeichen voneinander getrennt sind, in derselben Deklaration für die 'transform'-Eigenschaft angeben. – Ricky

Könntest du mich wissen lassen, was nicht funktioniert mit der Antwort die du mir gegeben hast, damit ich dich einstellen kann und du akzeptierst? – LGSon

Skript vermeiden Sie mit Darstellungseinheiten den ganzen Weg zur Arbeit benötigen, und dann scale() Notiz

Sie verwenden, nicht transition: all 0.5s besser perfomance achive verwenden, den Namen, die Eigenschaften umgestellt wurde, wie transition: transform 0.5s;

$("#hello").click(function(){ 
 
\t $("body").toggleClass("boom"); 
 
});

body { 
 
\t background: #222; 
 
\t 
 
\t /* full screen app */ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
} 
 

 
#hello { 
 
\t background: #b00; 
 
\t 
 
\t /* pixel size set in stone */ 
 
\t width: 40vw; 
 
\t height: 40vh; 
 
\t 
 
\t /* center on screen */ 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); \t 
 
\t transition: transform 0.5s; 
 
} 
 

 
.boom #hello { 
 
\t transform: translate(-50%, -50%) scale(2.5); \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
\t <div id="hello"> 
 
\t 
 
\t </div> 
 

 
</body>

Quelle

2017-01-02 20:39:38 LGSon

Soweit ich wissen, dass es nicht möglich ist, es zu erreichen, nur CS mit S unter Beibehaltung einer festen Breite und Höhe (unabhängig von der Breite/Höhe des Behälters).

Sie können es mit ein wenig JavaScript (jQuery in diesem Fall) erreichen. Ich füge die Klasse 'full' hinzu, um zu wissen, ob das Element voller Größe ist oder nicht, aber Sie könnten es zum Beispiel mit einer booleschen Variable erreichen.

JSFiddle

$("#hello").click(function() { 
 

 
    if ($("#hello").hasClass('full')) { 
 

 
    $("#hello") 
 
     .removeClass('full') 
 
     .css({ 
 
     "transform": "translate(-50%, -50%)" 
 
     }); 
 

 
    } else { 
 

 
    $("#hello") 
 
     .addClass('full') 
 
     .css({ 
 
     "transform": "translate(-50%, -50%) scale(" + $(window).width()/200 + ", " + $(window).height()/160 + ")" 
 
     });// 200 & 160 is the div width & height in pixels, set in the CSS 
 

 
    } 
 
});

body { 
 
    background: #222; 
 
    /* full screen app */ 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#hello { 
 
    background: #b00; 
 
    /* pixel size set in stone */ 
 
    width: 200px; 
 
    height: 160px; 
 
    /* center on screen */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /* animation */ 
 
    transition: 0.5s all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hello"> 
 
</div>

Quelle

2017-01-02 21:14:44 Alvaro

CSS transformieren px Größe div zu 100vw/100vh

Antwort

Verwandte Themen