CSSトランスフォーム後ろに戻る

Question

私はこのスニペットを見つけました：codepen.io/gianmichelle/pen/xpwEh/ マウスを離したときにアイコンが回転するチャンスですか？ ホバー上で360°回転します。しかし、私はマウスの左に戻って回転する方法が見つかりませんでした。あなたが要素の上に置くとあなたの例では、遷移は、唯一の有効なので、ない.social ul li:hover i要素に.social ul li i要素への移行を追加する必要が

a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.me { 
 
    width: 400px; 
 
    margin: 90px auto; 
 
} 
 
.me p, 
 
.me h1 { 
 
    text-transform: uppercase; 
 
    letter-spacing: 3px; 
 
    text-align: center; 
 
} 
 
.me p { 
 
    font-weight: 200; 
 
} 
 
.me span { 
 
    font-weight: bold; 
 
} 
 
.social { 
 
    position: fixed; 
 
    top: 20px; 
 
} 
 
.social ul { 
 
    padding: 0px; 
 
    -webkit-transform: translate(-270px, 0); 
 
    -moz-transform: translate(-270px, 0); 
 
    -ms-transform: translate(-270px, 0); 
 
    -o-transform: translate(-270px, 0); 
 
    transform: translate(-270px, 0); 
 
} 
 
.social ul li { 
 
    display: block; 
 
    margin: 5px; 
 
    background: rgba(0, 0, 0, 0.36); 
 
    width: 300px; 
 
    text-align: right; 
 
    padding: 10px; 
 
    -webkit-border-radius: 0 30px 30px 0; 
 
    -moz-border-radius: 0 30px 30px 0; 
 
    border-radius: 0 30px 30px 0; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -ms-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.social ul li:hover { 
 
    -webkit-transform: translate(110px, 0); 
 
    -moz-transform: translate(110px, 0); 
 
    -ms-transform: translate(110px, 0); 
 
    -o-transform: translate(110px, 0); 
 
    transform: translate(110px, 0); 
 
    background: rgba(255, 255, 255, 0.4); 
 
} 
 
.social ul li:hover a { 
 
    color: #000; 
 
} 
 
.social ul li:hover i { 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.36); 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -ms-transition: all 1s; 
 
    -o-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.social ul li i { 
 
    margin-left: 10px; 
 
    color: #000; 
 
    background: #fff; 
 
    padding: 10px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    font-size: 20px; 
 
    background: #ffffff; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 
body { 
 
    background: #25343F; 
 
    color: #fff; 
 
    font-family: 'Raleway', sans-serif; 
 
}

<link href='http://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> 
 

 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<nav class="social"> 
 
    <ul> 
 
    <li><a href="http://twitter.com/gian_michelle">Twitter <i class="fa fa-twitter"></i></a> 
 
    </li> 
 
    <li><a href="http://facebook.com/gian.michelle">Facebook <i class="fa fa-facebook"></i></a> 
 
    </li> 
 
    <li><a href="http://dribbble.com/gian_michelle">Dribbble <i class="fa fa-dribbble"></i></a> 
 
    </li> 
 
    <li><a href="http://behance.net">Behance <i class="fa fa-behance"></i></a> 
 
    </li> 
 

 
    </ul> 
 
</nav> 
 
<div class="me"> 
 
    <p>Created by: 
 
    <p> 
 
     <h1>Gian Di Serafino</h1> 
 
     <p>for <span>Informartion architecture</span> 
 
     </p> 
 
</div>

Answer 1

。そして、あなたはいつでも移行をアクティブにしたいと思っています。

あなたは追加する必要があります。ここでは

.social ul li i { 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s;  
} 

はペンです：http://codepen.io/anon/pen/KgVXwN

Answer 2

あなたはちょうど私の要素に初期回転コードを追加する必要があります。

.social ul li i { 
     -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
     transform: rotate(0deg); 
    }