Кто знает, могли бы вы ответить на несколько вопросов если не затруднит, я посмотрел на изображение и стало интересно.
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>
), так что все таки canvas
