Drehen bei Hover funktioniert nicht?

Question

Ich möchte eine kleine drehen, wenn ich mein Div schweben. Es funktioniert auf einem anderen Div, aber es funktioniert nicht auf diesem einen?

Hier ist mein Code:

.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

Ändern translateX() für rotate() macht Ihr div richtig drehen.

.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>