[PHP]Obrócić obraz czy go ponownie wczytać- co optymalniej?, Obrót obrazu o 180 stopni Opcje

[Mercel]

Witam
Potrzebuję wykorzystać na stronie obrazek o wymiarach 1008x138 pikseli. Obrazek ma być wykorzystany 2 razy, raz normalnie a drugi raz obrócony o 180 stopni. Zastanawiam się co jest optymalniejsze, wczytywanie obrazu 2 razy czy jego obrót w php? Dodam, że obrazek jest elementem strony głównej.

Ten post edytował Mercel 31.01.2012, 16:28:24

[seba123]

Statyczna, zoptymalizowana grafika będzie śmigać lepiej.

[by_ikar]

jeden obrazek + css: https://developer.mozilla.org/en/CSS/transform a tutaj masz jakiś generator: http://www.westciv.com/tools/transforms/ jeżeli chodzi o lustrzane odbicie danego obrazka, to również można to wykonać w css: http://designshack.net/articles/css/master...ions-in-webkit/ jeżeli chcesz większa kompatybilność to używasz javascriptu: http://www.digitalia.be/software/reflectionjs-for-jquery

php nie jest w tym przypadku do niczego potrzebny

[Mercel]

Dzięki by_ikar za cenną informację, gdyż nie wiedziałem o takich możliwościach w css, ale jednak skorzystam z rady seba123. Generator bardzo fajnie przekształca obrazy jednak działa dopiero od IE9. Jeżeli chodzi o javascript to nie mam z tym dużego doświadczenia, tym bardziej że też działa dopiero od IE9, a wcześniejsze wersje IE działają używając innej techniki rysowania.

Ten post edytował Mercel 31.01.2012, 21:06:55

[zegarek84]

Dzięki by_ikar za cenną informację, gdyż nie wiedziałem o takich możliwościach w css, ale jednak skorzystam z rady seba123. Generator bardzo fajnie przekształca obrazy jednak działa dopiero od IE9.

ten generator nic Ci nie przekształca tylko generuje kod CSS ;p

w starszych IE też obrazek można obrócić, jedna z moich funkcji z less (a więc "generator css"):

Kod

.rotate(@iDegrees) {
    -moz-transform: ~"rotate(@{iDegrees}deg)";
    -o-transform: ~"rotate(@{iDegrees}deg)";
    -webkit-transform: ~"rotate(@{iDegrees}deg)";
    -ms-transform: ~"rotate(@{iDegrees}deg)";
    transform: ~"rotate(@{iDegrees}deg)";
    // IE <= 8
    @deg2radians: 3.1416 * 2 / 360;
    @rad: @iDegrees * @deg2radians;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=`Math.cos(@{rad})`, M12=-`Math.sin(@{rad})`, M21=`Math.sin(@{rad})`, M22=`Math.cos(@{rad})`)";
    filter: ~"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=`Math.cos(@{rad})`, M12=-`Math.sin(@{rad})`, M21=`Math.sin(@{rad})`, M22=`Math.cos(@{rad})`)";
    zoom: 1;
}