ホバリング作業で回転しますか？

Question

私がdivを動かすと、小さな回転が欲しいです。それは他のdivで動作しますが、これで動作していませんか？ここで

は私のコードです：rotate()ためtranslateX()を変更

.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

は、あなたの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>