像css3一样旋转图像

-1

我有一张图像，其中左侧是黑色，右侧是红色。我的问题：有可能将图像翻转成中间的一本书吗？我希望左侧旋转，右侧保持旧位置。谢谢像css3一样旋转图像

来源

2013-06-04 Lorenzo Serra

请张贴你已经尝试过的代码。 – Praveen

http://www.turnjs.com/ –

是的，这是可能的！ – Christoph

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

来源

2013-06-04 12:48:13

非常感谢你！ –

'transition'和'transform-origin'不应该在'.wrapper：hover .left'中，而应该在'.left'规则中。 – Christoph

@Christoph如果你希望这本书在你不再徘徊时再次开启动画，那么我会同意。但那不是真正答案的重点OP没有说他计划如何使用它，所以我只是想演示所需的属性。我认为将它们全部放在一个地方会更清楚。 –

我不认为功能的纯CSS翻转书存在，或者我从来没有找到它。
你会发现一些实验，如this one或this one，这是很好的，但只有部分完整的工作。

无论如何，你可以做一些JS库，我想着TurnJS。

来源

2013-06-04 12:35:30 zessx

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

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

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

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

来源

2013-06-04 12:36:11 micuik

fyi：http://www.w3fools.com/ – Christoph

谢谢，@Christoph。 – micuik

像James Holderness解决方案http://jsfiddle.net/NDtcY/ .Sorry但我有一些难以用英语解释问题。 –

像css3一样旋转图像

回答

相关问题