Показать сообщение отдельно
  #4 (permalink)  
Старый 29.03.2011, 23:56
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Кто знает, могли бы вы ответить на несколько вопросов если не затруднит, я посмотрел на изображение и стало интересно.
1. Какими способами можно исказить картинку в виде трапеции как на примере, в голову приходит только canvas (пробовал css transform, но там вроде только простые искажения, rotate, skew, есть еще 2d 3d преобразорвания, я в них пока не разобрался (с помощью них можно сделать трапецию или повернуть картинку в 3d пространстве чтобы учитывалась перспектива?))
В сафари можно родителю искажаемого элемента задать -webkit-perspective: Npx, и потом например повернуть элемент как надо с помощью rotate, получится то что нужно. Но хочется чтобы это работало во всех, хотя бы последних версиях популярных браузеров.

2. С помощью 2d преобразования удалось только отразить блок с картинкой (на примере под картинками что-то не логичное, я думаю логичнее туда отражения поместить) так:
<!DOCTYPE html>

<style type = "text/css">
.wrapper{
	text-align: center;
	background-color: #000;
}
.preview{
	display: inline-block;
}
.preview div img{
	vertical-align:top;
}
.reflection{
	-webkit-transform: matrix(1,0,0,-1, 0,0);
	-moz-transform: matrix(1,0,0,-1, 0,0);
	-ms-transform: matrix(1,0,0,-1, 0,0);
	-o-transform: matrix(1,0,0,-1, 0,0);
	position: relative;
}
.gradi{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0,0,0,0.75)), color-stop(1, rgba(0,0,0,1)));
}
</style>
<div class = "wrapper">
	<div class = "preview">
		<div><img src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" /></div>
		<div class = "reflection"><img src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" /><div class = "gradi"></div></div>
	</div>
</div>

Вобщем, какие подходы можно использовать для решения подобных задач? Если в подобной галерее будет строго N картинок, то конечно можно в фотошопе подготовить все картинки, но так не интересно. Как бы вы делали подобную карусель, если очень абстрактно. Спасибо.
Вот пример как повернуть в пространстве картинку, но такое только в сафари доступно, даже в хроме не работает
<!DOCTYPE html>
<style type = "text/css">
	.wrapper{
		text-align: center;
	}
	.preview{
		padding:50px;
		-webkit-perspective:500px;
		display: inline-block;
	}
	.preview div img{
		vertical-align:top;
	}
	.reflection{
		-webkit-transform: rotateY(60deg);
	}
</style>
<div class = "wrapper">
	<div class = "preview">
		<div class = "reflection"><img src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" /></div>
	</div>
</div>
__________________
readOnly

Последний раз редактировалось poorking, 30.03.2011 в 00:40.
Ответить с цитированием