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的浏览器）。两者都为偏斜提供了浏览器特定的CSS扩展：-moz-transform和-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 +都支持。

有关详细信息，请参阅CSS transform on MDN。

Answer 4

据我所知，你做不到。你确定你想到的图像在Photoshop或类似的图像中没有倾斜，只是像这样添加到页面中吗？

Answer 5

没有。你不能。

倾斜图像和文字仍然是JavaScript juju。

编辑：或者，至少，您无法使用CSS2。从CSS3开始，有transform属性，其中包括旋转。

Answer 6

您可以使用Apple特定的CSS属性（即将批准，然后他们将删除它们的webkit前缀）来执行此操作和动画效果，但它现在只会显示在Safari和Chrome中。不过，它们看起来很漂亮，CSS很容易做到。

现在它可能只是在Photoshop中完成，并且在那里也很好地消除了锯齿，因此它具有一致的跨浏览器外观。

Answer 7

我们正在做类似的工作，我们必须在飞行中做。

你不能只使用html / css，但我们通过php脚本使用图像库自动生成它们，然后使背景透明。

Answer 8

使用PHP GD库。使事情变得如此简单。

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

8 个答案: