Ответ 1
Вы хотите использовать -moz для Firefox; -о для Opera. Это расширения для правильного форматирования в этих браузерах. Отличный сайт для фигур здесь.
.trapezoid
{
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
Также я не уверен, пытаюсь ли вы изменить какой-то эффект; но код перехода будет выглядеть так:
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
Просто добавьте переход перед рукой; затем бросьте преобразование на зависании. Если вы пытаетесь добавить его, как кнопку. Надеюсь, это поможет.
Я использовал Firebug для просмотра некоторых дополнительных данных; с Firefox 16.02 этот код работал:
.trapezium
{
height: 0px;
width: 80px;
border-bottom-width: 80px;
border-bottom-style: solid;
border-bottom-color: #2d9dcd;
border-left-width-value: 40px;
border-left-style-value: solid;
border-left-color-value: transparent;
border-right-width-value: 40px;
border-right-style-value: solid;
border-right-color-value: transparent;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
Я считаю, что это то, что вы ищете. Попробуйте это и сообщите мне, если это сработает.