can i tilt an image easily using HTML or CSS?

Answer 1

CCS 3 will offer this possibility, but it's still not cross-browser and you cannot do it with traditional HTML + CSS... yet.

Websites having a tilted image do it by rotating it in, say, Photoshop and making its background transparent. That's the whole trick there's to it.

Tip: save that picture to your HD and see by yourself. That's probably just an squared image with transparent background, or maybe it has the current background cut nicely to fit there.

Answer 2

To my knowledge you can not do that. Are you sure the image you are thinking of isn't tilted in Photoshop or similar and just added to the page like that?

Answer 3

No. You can't.

Tilting images and text is still JavaScript juju.

Answer 4

You can use Apple specific CSS attributes (soon to be ratified, and then they'll remove the webkit prefixes for them) to do this and animation effects, but it will only show up in Safari and Chrome right now. Still, they look quite pretty and CSS is simple to do.

Right now it's probably just done in Photoshop, and nicely anti-aliased there as well, so that it has a consistent cross-browser appearance.

Answer 5

You can do it, but only in Firefox 3.5+ and Safari 3.2+ (and recent webkit based browsers). Both provide browser specific CSS extensions for skew: -moz-transform and -webkit-transform respectively.

Here's a nice example that builds a 3d looking cube out of divs: (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 6

We are doing something similar at work, we have to do it on the fly.

You can't do it with just html/css, however we are using an image library through a php script to generate them automatically, and then make the background transparent.

Answer 7

Use a PHP GD Library. Makes things so much easier.