How would I go about transforming like this in CSS?

Question

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.

Answer 1

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.