旋轉懸停不起作用？

Question

我想要一個小旋轉當我懸停我的div。它在另一個div上工作，但它不適用於這個？

這裏是我的代碼：

.more, 
 
.more:visited { 
 
    color: #fff; 
 
    min-width: 88px; 
 
    height: 80px; 
 
    display: block; 
 
    background-color: green; 
 
    padding: 22px 28px 0 28px; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    bottom: -40px; 
 
    right: 34px; 
 
    -webkit-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 
} 
 
.more:hover { 
 
    color: #fff; 
 
    transform: translateX(-230px); 
 
}

<div id="meer"><a id="kleur" class="more" style="width: 105px; height:105px; padding: 32px 28px 22px 30px; mix-blend-mode: multiply;" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">LEES MEER</a> 
 
</div>

Answer 1

更改爲translateX()，使rotate()您的div正常旋轉。

.more, .more:visited { 
 
    color:#fff; 
 
    min-width:88px; 
 
    height:80px; 
 
    display:block; 
 
    background-color: green; 
 
    padding:22px 28px 0 28px; 
 
    -webkit-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
    position:absolute; 
 
    bottom:-40px; 
 
    right:34px; 
 
    -webkit-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 
} 
 
.more:hover { 
 
    color:#fff; 
 
    transform: rotate(-45deg); 
 
}

<div id="meer"> 
 
    <a id="kleur" class="more" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">LEES MEER</a> 
 
</div>