使用CSS旋转图像并丢弃边缘

Question

我已经被困在这3天了！ 我有这个形象 http://i.stack.imgur.com/JnFuH.jpg 我想用css旋转它。 我知道它很容易旋转，但是当我旋转时我不想要显示边缘 这样的事情 http://i.stack.imgur.com/conWO.png

那怎么可能用css做到这一点？ 因为我有一个显示图像的php循环，我想旋转它们。

Answer 1

您必须在容器中包含图片以隐藏/剪辑overflow部分图片并重新缩放，

或使用较小容器而不是原始尺寸的图片。的 DEMO

Answer 2

我不是100％确定你目前是如何做到这一点的，但如果你在包含元素上使用overflow:hidden;，它应该可以工作。请参阅此处以获取示例：http://jsfiddle.net/Jaqq5/

HTML

<div id="container">
    <img src="..." />
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    overflow:hidden;
}
img {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}