Как я могу преобразовать это в CSS?

Question

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

и формировать его на что-то вроде этого:

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

Answer 1

Я бы рекомендовал использовать комбинацию rotateX, перспективные и ScaleY свойства для 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 необходимо, если вы не хотите, чтобы изображение выглядело слишком плоским, потому что оно отклоняется от зрителя.

См скрипку здесь - 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 заставит элемент изображения чтобы он трансформировался таким образом, что он вытекает из его первоначальной границы, вы можете захотеть установить маркер/дополнение вокруг элемента, чтобы он не мешал окружающему контенту.