Question

我在添加边框半径时尝试在悬停时旋转div中的图像。它完美无缺，直到添加过渡。

这是我的css

.box{position:relative; height:300px; width:300px; display:block;overflow:hidden; }
img{position:relative;z-index:2; opacity:1;}
.box:hover img{border-radius:150px;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transition:all .5s linear;transition:all .5s linear; }

这是HTML

<div class="box">
<img src="http://i.imgur.com/ZzgHX9M.jpg" alt="beach">
</div>

这是demo on CodePen。

我可以通过背景图片来实现这一点，但是为了最终项目的目的，这是不可行的。任何帮助是极大的赞赏。

谢谢！

注意：.box div

中最终会有一个标题div

Answer 1

无法找到解决方案。旋转功能真的很重要吗？如果没有旋转功能就可以，请看这个小提琴。

Fiddle

我刚刚删除了translate:rotateY

希望这会有所帮助。

Answer 2

我有一个适用于Chrome和Firefox的解决方案 - 我将转换指定为“转换”而不是使用“全部”。请告诉我这是否有帮助？

这是CSS：

.box{
position:relative;
height:300px; 
width:300px; 
display:block;
overflow:hidden; 
}
img{
position:relative;
z-index:2; 
opacity:1;
}
.box:hover img{
-webkit-border-radius: 150px; 
-moz-border-radius: 150px; 
border-radius:150px;    
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
-webkit-transition: transform .5s linear;
transition: transform .5s linear;
}

使用边界半径旋转

2 个答案:

Fiddle