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.
Statyczna, zoptymalizowana grafika będzie śmigać lepiej.
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
php nie jest w tym przypadku do niczego potrzebny
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.
Cytat(Mercel @ 31.01.2012, 21:06:20 ) 
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;
}
-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;
}
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.