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

Question

我有以下标签：

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

我想在鼠标旋转时只旋转外部div，图像将跟随鼠标，请帮帮我。

Answer 1

您只需以相反的方式旋转内部div元素。如果您在div之前轮换外部90deg元素，则只需同时向内部-90deg应用div轮播。

在下面的演示中，我为.outer-img元素添加了一个红色上边框，为.inner-circle元素添加了一个蓝色下边框，以显示.outer-img在.inner-circle旋转时1}}似乎停留在同一个地方。

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>