Как да завъртите + флип елемент с CSS

Свойството transform ви позволява да завъртате или обръщате, но как можете да правите и двете едновременно? Да кажем, че искам да завъртя елемент на 90 градуса и да го обърна хоризонтално? И двете се извършват с едно и също свойство, така че последното презаписва първото. Ето примерна цигулка за удобство:

http://jsfiddle.net/DtNh6/

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

css css-transforms
person chinabuffet    schedule 10.06.2013    source източник

Отговори (4)


arrow_upward
61
arrow_downward

Заиграх се с jsfiddle и това проработи:

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

За да го свържем с вашия въпрос, полученият CSS изглежда така

transform: rotate(90deg) scaleX(-1);
person James Green    schedule 10.06.2013
comment
Някаква идея дали това се поддържа и в браузърите? Благодаря! - person chinabuffet; 10.06.2013
comment
Битът за разделени с интервал свойства е в спецификацията -- доколко спецификациите се поддържат от браузърите е само за предположение, но мисля, че бих бил уверен, че го използвам (доколкото изобщо разчитам на браузъри, изпълняващи трансформации ) - person James Green; 10.06.2013
comment
Харесва ми как отговорих на абсолютно същото нещо преди него и ти отбеляза неговия като отговор. - person Austin Brunkhorst; 10.06.2013

arrow_upward
17
arrow_downward

Свойствата могат да бъдат разделени с интервали, така.

transform: rotate(90deg) scaleX(-1);
person Austin Brunkhorst    schedule 10.06.2013

arrow_upward
9
arrow_downward

За бъдещите поколения по-пълен отговор:

.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);
}
person Kaan Soral    schedule 26.06.2016

arrow_upward
0
arrow_downward

Разгледайте това:

element {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

за повече информация тук е връзката: https://css-tricks.com/snippets/css/flip-an-image/

person Owaiz Yusufi    schedule 20.10.2018