Подтвердить что ты не робот

Как повернуть + флип-элемент с помощью CSS

Свойство transform позволяет вам поворачивать или переворачивать, но как вы можете делать оба одновременно? Скажем, я хочу повернуть элемент на 90 градусов и перевернуть его по горизонтали? Оба выполняются с тем же свойством, поэтому последний перезаписывает первое. Вот пример скрипта для удобства:

http://jsfiddle.net/DtNh6/

transform: rotate(90deg);
transform: scaleX(-1);

Ответ 1

Я поиграл с jsfiddle, и это сработало:

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

Чтобы связать его с вашим вопросом, полученный CSS выглядит как

transform: rotate(90deg) scaleX(-1);

Ответ 2

Свойства могут быть разделены пробелами, например.

transform: rotate(90deg) scaleX(-1);

Ответ 3

Для будущих поколений более полный ответ:

.rotate2{ /*leaning left <- */
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    transform:rotate(270deg);
}
.rotate4{ /*upside down*/
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.rotate6{ /*leaning right -> */
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}
.rotate8{ /*vertical flip*/ /*upside-down mirror*/
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}
.rotate10{ /*vertical flip*/ /*upside-down*/
    -moz-transform: rotate(90deg) scale(1, -1);
    -webkit-transform: rotate(90deg) scale(1, -1);
    -o-transform: rotate(90deg) scale(1, -1);
    -ms-transform: rotate(90deg) scale(1, -1);
    transform: rotate(90deg) scale(1, -1);
}
.rotate12{ /*horizontal flip*/ /*left-right mirror*/
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.rotate14{ /*horizontal flip*/ /*left-right mirror*/
    -moz-transform: rotate(90deg) scale(-1, 1);
    -webkit-transform: rotate(90deg) scale(-1, 1);
    -o-transform: rotate(90deg) scale(-1, 1);
    -ms-transform: rotate(90deg) scale(-1, 1);
    transform: rotate(90deg) scale(-1, 1);
}