Question

我在一个div中有一个钻石形状，其中有一个图像，并且有一个带有绝对定位文本的div。在悬停时，我希望钻石旋转，但不是文本。有可能实现吗？我想我必须稍微更改一下HTML。以下是我到目前为止的尝试：

HTML：

<div class="rel">
  <div class="dn-diamond">
    <h4> Random text </h4>
      <div class="dn-diamond-img">
        <img src="../images/someImage.png" alt="">
      </div>
  </div>
</div>

CSS：

.rel {
    position: relative;
    display: inline;
}

.rel:hover {
    animation: spin 3s infinite linear;
}

@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}


.rel:hover .dn-diamond h4 {
    -webkit-animation-name: none !important;
  animation-name: none !important;
}

.dn-diamond h4 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: absolute;
  top: -20px;
  left: 20px;
  padding: 10px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.dn-diamond-img {
    width: 420px;
  height: 420px;

}

.dn-diamond-img img {
    width: 100%;
    height: auto;
    -webkit-transform: rotate(45deg) translateX(-95px);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg) translateX(-100px) translateY(45px);
  transform-origin: 50% 50%;
  overflow: hidden;
}

感谢您的帮助！

Answer 1

我不确定你是否在寻找这个：

http://codepen.io/luarmr/pen/qdrvgM

我的更改

.rel {
    position: relative;

}

.rel:hover img{
    animation: spin 3s infinite linear;
}

还有动画，因为对我来说没有意义的跳跃

@keyframes spin {
    from { 
      transform: rotate(45deg) translateX(-100px) translateY(45px);
      transform-origin: 50% 50%;
    }
    to { 
      transform: rotate(405deg) translateX(-100px) translateY(45px);
      transform-origin: 50% 50%; }
    }
}

Answer 2

你把它称为钻石，所以我想你要保持它直立。我想这就是你想要的：http://jsfiddle.net/t67c7ffq/1/

我所做的就是将.rel:hover更改为.dn-diamond-img:hover。这不会旋转h4。

Answer 3

为您的html id=myimage分配<img src="../images/someImage.png" alt="" id="myimage">，然后将css从.rel更改为#myimage。你只需要旋转图像，对吗？

旋转div中的形状，同时使另一个div停留在同一个地方

3 个答案: