html - 用 css3 像书一样旋转图像

Question

我有一张左侧是黑色，右侧是红色的图像。我的问题：有可能像中间的书一样翻转这个图像？我希望左侧旋转而右侧保持在旧位置。谢谢

Answer 1

首先，您是否有可能澄清您的问题？当你说“把这张图片像中间的书一样翻转”时，很难说出你在问什么。你的意思是你想要右边的黑色和左边的红色？此外，当点击或悬停在网页上时，这是否需要发生在网页上？

对于任何类型的转换，您都需要使用CSS3 转换属性。例如：

div
{
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    transform:rotate(7deg);
}

不要忘记设置浏览器前缀。

Answer 2

我认为不存在功能性纯 css 翻书，或者我从未找到它。
您会发现一些实验，例如this one或this one，它们很好，但只是完整工作的一部分。

无论如何，你可以用一些 JS 库来做到这一点，我正在考虑TurnJS。

Answer 3

您可以使用透视属性和绕 Y 轴旋转来获得相当不错的效果。

例如使用这样的标记：

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

你会像这样使用 CSS：

.left, .right {
  width:100px;
  height:200px;
  float:left;
}
.left {
  background:red;
  transform-origin:100px 0;
  transition:transform 1s;
}
.right {
  background:black;
}
.wrapper {
  perspective:1000px;
  perspective-origin:100px 100px;
}

.wrapper:hover .left {
  transform:rotateY(180deg);
}

当您将鼠标悬停在“书”上时，此特定示例会应用转换。

这是一个包含 webkit 前缀的小提琴示例：http: //jsfiddle.net/nAEBF/