我可以使用HTML或CSS轻松地倾斜图像吗？

Question

Apple用户网页上的一些设计显示了一张略微倾斜的照片,例如5度或10度角.虽然这没什么大不了的,但它确实使网页与"其他所有"完全不同.

目前使用的是HTML还是CSS,这还不行吗？

就像中间的大照:

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

(该程序可让您选择照片,然后为您动态创建页面(html和jpg))

Answer 1

CCS 3将提供这种可能性,但它仍然不是跨浏览器,你不能用传统的HTML + CSS做到这一点......

具有倾斜图像的网站通过在Photoshop中旋转并使其背景透明来实现.这就是它的全部诀窍.

提示:将该图片保存到您的高清,然后自己查看.这可能只是一个带有透明背景的平方图像,或者它可能很适合当前背景剪裁.

Answer 2

您可以这样做,但仅限于Firefox 3.5+和Safari 3.2+(以及最近的基于webkit的浏览器).两者都分别为skew:-moz-transform和提供浏览器特定的CSS扩展-webkit-transform.

这是一个很好的例子,用div构建一个3d外观立方体:(来自 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>

和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

是的,使用CSS3,您可以:

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

所有现代浏览器和IE9 +都支持.

有关更多信息,请参阅MDN上的CSS转换.