围绕y轴旋转图像

Question

我有一个图像,分为两个相等的部分.我正在尝试在悬停时围绕y轴以-180°(逆时针)旋转图像的右侧部分.

问题是有时(随机)图像以180°(顺时针)旋转而不是-180°(逆时针).这背后可能是什么原因？我正在使用铬.

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>

小提琴

Answer 1

某些浏览器不支持旋转，例如 Internet Explorer 9（及更早版本）和 Opera 不支持旋转 X 或旋转 Y 方法。

否则尝试

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