使用css或jquery仅旋转背景图像

Question

我有以下标签：

​

​

<div class="outer-img">
   <div class="inner-circle">
     <image src..../>
   </div>
</div>

我只想旋转鼠标上的外部div旋转所有的侧面，图像将跟随鼠标，请帮助我。

Answer 1

您只需以相反的方式旋转内部的div元素。如果要通过90deg旋转外部div元素，只需将-90deg的旋转同时应用到内部div。

在下面的演示中，我向.outer-img元素添加了一个红色的上边框，并向.inner-circle元素添加了一个蓝色的下边框，以显示.outer-img旋转，而.inner-circle似乎停留在同一位置。

​

div {
  height: 100px;
  width: 100px;
}

.outer-img {
  border-top: 1px solid #f00;
}

.inner-circle {
  border-bottom: 1px solid #00f;
}

.outer-img:hover {
  -webkit-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.outer-img:hover .inner-circle {
  -webkit-transform: rotateZ(-90deg);
  -moz-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
}

<div class="outer-img">
   <div class="inner-circle">
     <img src="http://placehold.it/100x100" />
   </div>
</div>

​