Как я могу повернуть эту кнопку на 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

К сожалению: http://codepen.io/andreasstorm/pen/raqoyb – Ahmad

Есть несколько более эффективных способов сделать это.

a) Пропустите все это и используйте инструмент для создания альтернативного изображения кнопки с оригинальным изображением, повернутым на 180 градусов.

b) Используйте вместо него один из символов NUMEROUS Unicode. См. Эту страницу в Википедии: http://en.wikipedia.org/wiki/Arrow_(symbol)

источник

2015-04-04 12:13:30

Как я могу повернуть эту кнопку на 180 °?

ответ

Смежные вопросы