CSS變換旋轉回

我發現這個片斷：codepen.io/gianmichelle/pen/xpwEh/ GIVS的機會，該圖標旋轉回來時，我走我的鼠標？在懸停我旋轉360°。但是我沒有找到一種方法來回轉鼠標。CSS變換旋轉回

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>

來源

2016-09-13 Koda

檢查了這一點：http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover – Legionar

你必須不加過渡到.social ul li i元素.social ul li:hover i元素，因爲在你的榜樣，轉變纔有效，當你將鼠標懸停在元素。並且您希望轉換始終處於活動狀態。

您必須添加：

.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

來源

2016-09-13 11:17:03

你只需要初始旋轉代碼添加到我元;

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

來源

2016-09-13 11:17:34

CSS變換旋轉回

回答

相關問題