绕 y 轴旋转图像

Question

我有一张图片，被分成两个相等的部分。我想在鼠标悬停时将图像的右半部分绕y轴旋转-180°（逆时针）。

问题是，有时候（随机的），图片会旋转180°（顺时针）而不是-180°（逆时针）。可能的原因是什么？我正在使用chrome浏览器。

CSS：-

.container {
  position: relative;
  margin-top : 10px;
  width : 500px;
  height: 330px;
   -webkit-perspective: 1500px;
  box-shadow: 3px 3px 13px #AAA;
}

.frontDiv {
  padding: 20px;
  width: 500px;
  height: 330px;  
}

.frontImg {
  position: absolute;
  border:1px solid;
  height : 281px;
  width : 225px;  
  overflow: hidden;
  background-image: url('iday.jpg');
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  backface-visibility : hidden;
   -webkit-transform-origin:0% 0%; 
}

.f1 {
  top: 20px;
  left:20px;
  background-position: 0px 0px;
}


.f2 {
  top: 20px;
  left:245px;
  background-position: -225px 0px;
}

.frontDiv:hover .f2
{ 
 -webkit-transform : rotateY(-180deg);
 }

html:-

<article class='container'>
  <div class='frontDiv'>
    <div class='frontImg f1'></div>
    <div class='frontImg f2'></div>
  </div>
</article>

fiddle

- Aditya Ponkshe

---

我一直无法看到错误发生。不管怎样，我已经添加了一个fiddle与你的代码;这样测试就更容易了。 - vals

@vals 感谢你提供的 fiddle，对我来说，在你的 fiddle 中 div 元素一直以顺时针方向旋转，即使角度为-180度。 - Aditya Ponkshe

小提琴是您提供的代码的复制粘贴。问题可能在您真实页面的其他地方。我的意思是关于变换随机执行不同的操作。从您的评论中，我无法确定您是否希望旋转相反。关于这一点，我会说行为是可以的；但我并不完全确定，这种事情很容易被误解（至少对我来说是这样）。 - vals

小提琴有时候无法呈现3D深度效果。也就是说，它会显示这个而不是这个。而且，看起来是随机的。 - Mr Lister

@MrLister 真的看不到...在Windows上使用Chrome 28.0.1500.95 m。 - vals

Answer 1

一些浏览器不支持旋转功能，例如Internet Explorer 9（及早期版本）和Opera不支持rotateX或rotateY方法。

否则，请尝试其他浏览器。

.frontDiv:hover .f2
{ 
transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg); /* IE 9 */
-webkit-transform: rotateY(-180deg); /* Safari and Chrome */
 }

- Divyek

---

我已经在你的代码中尝试过了，它可以在我的 Firefox 23.0.1 上运行。 - Divyek

我正在使用Chrome，并且在我的代码中使用了-webkit-transform: rotateY(-180deg); - Aditya Ponkshe

@shivoham，虽然你的回答是正确的，但并没有解决OP的问题。为什么即使在同一个Chrome浏览器上，在连续的鼠标悬停时，悬停过渡效果不总是表现相同，而且中间也没有做任何操作。 - Mr Lister

@Mr. Lister不同意您的观点，认为在相同的浏览器和版本下，效果是一样的。我已经在Chrome 28中尝试过了，那个3D效果非常棒，虽然与Mozilla不同。也许在Chrome 27中会有所不同。 - Divyek