How would I go about transforming like this in CSS?

css, css-shapes, html, transform

Solution

I would recommend using a combination of rotateX, perspective and scaleY properties for CSS3 transform:

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);
}

To adjust how slanted the sides are, you can increase or decrease the extent of rotation along the X axis.

The scaleY property is needed, if you don't want the image to appear too flat because it is being tilted away from the viewer.

See fiddle here - http://jsfiddle.net/teddyrised/GsZvE/ or the code snippet below:

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="https://i.stack.imgur.com/sXMjN.png" />

[Edit]: For the sake of completeness, due to the fact that using `perspective` will cause the image element to be transformed such that it spills out of its original boundary, you might want to set a margin/padding around the element so that it does not obstruct surrounding content.

Problem

I want to take something like this: and shape it to something like this: using only CSS. I'm aware of CSS transforms, but I'm not sure which to use. Skew doesn't seem to be right, neither does translate.

Original source

Related problems