如何將此按鈕旋轉180°？

我想旋轉一個CSS按鈕中的箭頭，但我不能繼續旋轉整個按鈕...如何將此按鈕旋轉180°？

重點是從上傳按鈕進行下載按鈕。我怎樣才能只旋轉箭頭？

按鈕：

body { 
    background: #2d3e4f; 
} 
.cntr { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 
.upload { 
    display: block; 
    width: 40px; 
    height: 50px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    background: #e64d43; 
    cursor: pointer; 
} 
.upload:after { 
    content: ''; 
    position: absolute; 
    display: block; 
    top: 0px; 
    right: 0px; 
    width: 0px; 
    height: 0px; 
    -webkit-border-radius: 0px 2px 0px 2px; 
    border-radius: 0px 2px 0px 2px; 
    background: -webkit-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%); 
    background: -moz-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%); 
    background: -o-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%); 
    background: -ms-linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%); 
    background: linear-gradient(45deg, #c5251a 50%, #2d3e4f 50%); 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    -ms-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
} 
.upload i { 
    width: 2px; 
    height: 14px; 
    background: #fff; 
    display: block; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    -webkit-transition: all 150ms linear; 
    -moz-transition: all 150ms linear; 
    -o-transition: all 150ms linear; 
    -ms-transition: all 150ms linear; 
    transition: all 150ms linear; 
} 
.upload i:before, 
.upload i:after { 
    content: ''; 
    position: absolute; 
    display: block; 
    width: 2px; 
    height: 8px; 
    background: #fff; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    -webkit-transition: all 150ms linear; 
    -moz-transition: all 150ms linear; 
    -o-transition: all 150ms linear; 
    -ms-transition: all 150ms linear; 
    transition: all 150ms linear; 
} 
.upload i:before { 
    -webkit-transform: rotate(45deg) translateX(-3px); 
    -moz-transform: rotate(45deg) translateX(-3px); 
    -o-transform: rotate(45deg) translateX(-3px); 
    -ms-transform: rotate(45deg) translateX(-3px); 
    transform: rotate(45deg) translateX(-3px); 
} 
.upload i:after { 
    -webkit-transform: rotate(-45deg) translateX(3px); 
    -moz-transform: rotate(-45deg) translateX(3px); 
    -o-transform: rotate(-45deg) translateX(3px); 
    -ms-transform: rotate(-45deg) translateX(3px); 
    transform: rotate(-45deg) translateX(3px); 
} 
.upload:hover i { 
    height: 18px; 
} 
.upload:hover:after { 
    width: 12px; 
    height: 12px; 
}

來源

2015-04-04 Ahmad

您可以共享實際的CSS輸出而不是預處理的輸出嗎？並非所有的用戶都熟悉它，並且這個問題並不在於預處理的CSS中的錯誤。 – Terry 2015-04-04 12:08:40

對不起：http://codepen.io/andreasstorm/pen/raqoyb – Ahmad 2015-04-04 12:10:08

有幾個更有效的方式來做到這一點。

a）跳過所有這些，使用工具創建一個替代按鈕圖像與原始圖像旋轉180度。

b）改爲使用其中的一個NUMEROUS Unicode字符。請參閱此維基百科頁面：http://en.wikipedia.org/wiki/Arrow_(symbol)

來源

2015-04-04 12:13:30

如何將此按鈕旋轉180°？

回答

相關問題