Question

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

Answer 1

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

对于任何类型的转换，您都希望使用CSS3 transform property。例如：

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

使用perspective属性和围绕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/

使用css3旋转图像，如图书

3 个答案: