Is it easy to tilt an image using HTML or CSS?

Question

some of the pictures on the Apple user’s webpage show a photograph that is slightly tilted, for example, at an angle of 5 or 10 degrees. while it doesn't really matter, it makes the webpage completely different from "everyone else".

is it true that HTML or CSS is currently being used, is this not yet possible?

like a big photo in the middle:

alt text http://img7.imageshack.us/img7/383/phototilt.png

(the program allows you to select photos, and then dynamically create a page (html and jpg))

Answer 1

CCS 3 will offer this feature, but it is still not a cross browser, and you cannot do it using traditional HTML + CSS ... for now.

Sites with a tilted image do this by rotating it, say, in Photoshop and making its background transparent. That's the whole trick with her.

Tip. save this picture to your HD and see for yourself. This is probably just a square of the image with a transparent background, or maybe it has a current background that is well suited for placement.

Answer 2

You can do this, but only on Firefox 3.5+ and Safari 3.2+ (and the latest web-based browsers). Both provide custom CSS extensions for CSS: -moz-transform and -webkit-transform respectively.

Here is a good example that creates a 3D cube from a div: (from http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/ )

 <div class="cube"> <div class="topFace"> <div> Content </div> </div> <div class="leftFace"> Content </div> <div class="rightFace"> Content </div> </div> 

And CSS:

 .cube { position: relative; top: 200px; } .rightFace, .leftFace, .topFace div { padding: 10px; width: 180px; height: 180px; } .rightFace, .leftFace, .topFace { position: absolute; } .leftFace { -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); background-color: #ccc; } .rightFace { -webkit-transform: skewY(-30deg); -moz-transform: skewY(-30deg); background-color: #ddd; left: 200px; } 

Answer 3

Yes, with CSS3 you can:

 -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); 

Supported by all modern browsers and IE9 +.

See CSS conversion to MDN for more information.

Answer 4

As far as I know, you cannot do this. Are you sure that the image you are thinking about is not tilted in Photoshop or the like, and just added to this page?

Answer 5

No. You can not.

Tilt images and text is still javascript juju.

Change Or at least you could not with CSS2. Starting with CSS3, there is a transform property that includes rotations.

Answer 6

You can use Apple's specific CSS attributes (which will be ratified soon, and then they will remove the website prefixes for them) to do this and the animation effects, but it will only display in Safari and Chrome right now. However, they look pretty pretty, and CSS is very simple.

Currently, this is probably just done in Photoshop, and is nicely smoothed there, so that it has a consistent look in the browser.

Answer 7

We do something like this at work, we have to do it on the fly.

You cannot do this only with html / css, however we use an image library via php script to generate them automatically and then make the background transparent.

Answer 8

Use the PHP GD library. Makes things a lot easier.