Как бы я мог сделать подобное преобразование в CSS?

Я хочу взять что-то вроде этого:

Оригинал

и сформируйте его примерно так:

введите здесь описание изображения

используя только CSS. Я знаю о преобразованиях CSS, но не уверен, что использовать. Skew не кажется правильным, как и перевод.


html css transform css-shapes
person Mike Savi    schedule 03.05.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я бы рекомендовал использовать комбинацию свойств rotateX, перспектива и масштабирование для преобразования CSS3:

img {
    -moz-transform: perspective(600px) rotateX(45deg) scaleY(1.3);
    -o-transform: perspective(600px) rotateX(45deg) scaleY(1.3);
    -webkit-transform: perspective(600px) rotateX(45deg) scaleY(1.3);
    transform: perspective(600px) rotateX(45deg) scaleY(1.3);
}

Чтобы настроить наклон сторон, вы можете увеличить или уменьшить угол поворота по оси X.

Свойство scaleY необходимо, если вы не хотите, чтобы изображение выглядело слишком плоским из-за того, что оно наклонено от зрителя.

См. fiddle здесь — http://jsfiddle.net/teddyrised/GsZvE/ или фрагмент кода ниже :

body {
    padding: 50px;
}
img {
    -moz-transform: perspective(600px) rotateX(45deg) scaleY(1.3);
    -o-transform: perspective(600px) rotateX(45deg) scaleY(1.3);
    -webkit-transform: perspective(600px) rotateX(45deg) scaleY(1.3);
    transform: perspective(600px) rotateX(45deg) scaleY(1.3);
}
<img src="http://i.stack.imgur.com/sXMjN.png" />

[Редактировать]: для полноты из-за того, что использование perspective приведет к преобразованию элемента изображения таким образом, что он выйдет за пределы своей исходной границы, вы можете установить поля/отступы вокруг элемента, чтобы он не загораживает окружающий контент.

person Terry    schedule 03.05.2013